assistant
asked on
Hidden/visible coding?
Is is possible to have simple code where on mouseover it changes visible properties similar to this? I want a small star to show up when the user moves the mouse over an area and for the star to be hidden when the user moves the mouse off of it. Maybe something like this...
<DIV id=Higlight1
style="HEIGHT: 18px; LEFT: 0px; POSITION: absolute; TOP: 100px; Z-INDEX: 2; visibility: hidden">
<DIV align=Left><IMG src="smallstar.jpg" height= 18 width=18></DIV>
</DIV>
</P>
<DIV id=Higlight2
style="HEIGHT: 18px; LEFT: 0px; POSITION: absolute; TOP: 200px; Z-INDEX: 2; visibility: hidden">
<DIV align=Left><IMG src="smallstar.jpg" height= 18 width=18></DIV>
</DIV>
</P>
<DIV id=Higlight3...
<P><MAP name=Navigaional Bar>
<AREA alt="Highlight Area 1"
coords=309,7,32,7,322,29,2
href="http:someplace.html"
onmouseout="'Highlight1.vi
onmouseover="Highlight1.vi
<AREA alt="Highlight Area 2"
coords=356,7,32,7,412,29,2
href="http:someotherplace.html"
onmouseout="'Highlight2.vi
onmouseover="Highlight2.vi
<AREA alt="Highlight Area 3"...
</MAP></P>
I would appreciate the help.
<DIV id=Higlight1
style="HEIGHT: 18px; LEFT: 0px; POSITION: absolute; TOP: 100px; Z-INDEX: 2; visibility: hidden">
<DIV align=Left><IMG src="smallstar.jpg" height= 18 width=18></DIV>
</DIV>
</P>
<DIV id=Higlight2
style="HEIGHT: 18px; LEFT: 0px; POSITION: absolute; TOP: 200px; Z-INDEX: 2; visibility: hidden">
<DIV align=Left><IMG src="smallstar.jpg" height= 18 width=18></DIV>
</DIV>
</P>
<DIV id=Higlight3...
<P><MAP name=Navigaional Bar>
<AREA alt="Highlight Area 1"
coords=309,7,32,7,322,29,2
href="http:someplace.html"
onmouseout="'Highlight1.vi
onmouseover="Highlight1.vi
<AREA alt="Highlight Area 2"
coords=356,7,32,7,412,29,2
href="http:someotherplace.html"
onmouseout="'Highlight2.vi
onmouseover="Highlight2.vi
<AREA alt="Highlight Area 3"...
</MAP></P>
I would appreciate the help.
you could always load up a small clear image.
then on mouseover/mouseout of your area, simply swap in/out the star image and the clear image.
A 1 pixel clear gif won't take up much space, will stretch to fit your width and height definitions and the swapping is probably easier to do cross-browser than trying to hide/show a div.
just a thought...
then on mouseover/mouseout of your area, simply swap in/out the star image and the clear image.
A 1 pixel clear gif won't take up much space, will stretch to fit your width and height definitions and the swapping is probably easier to do cross-browser than trying to hide/show a div.
just a thought...
ASKER
Thanks CJ and Bigred for your comments. CJ I have tried the script that you sent and it works with exactly what I asked, however, is there a way to tell it that onMouseover and onMouseout that I want to change several items at once? For instance,
<MAP NAME="new">
<AREA alt="Our Mission"
SHAPE=RECT COORDS="0,0,124,19"
HREF="aboutchurch.html"
onMouseover="shElement('Mi
('star', 'visible')"
onMouseout="shElement('Mis
(star', 'hidden')
(defaultbmp',visible)"
Some areas I would want to have more hidden/visible objects than others. I increased the points because of my posting was actually answered but I know this is more work. Thanks.
<MAP NAME="new">
<AREA alt="Our Mission"
SHAPE=RECT COORDS="0,0,124,19"
HREF="aboutchurch.html"
onMouseover="shElement('Mi
('star', 'visible')"
onMouseout="shElement('Mis
(star', 'hidden')
(defaultbmp',visible)"
Some areas I would want to have more hidden/visible objects than others. I increased the points because of my posting was actually answered but I know this is more work. Thanks.
Calling multiple functions is as easy as using a semicolon:
onMouseover="shElement('Hi
onMouseout="shElement('Hig
You can add as many as you like. Sometimes it may be better to call a function that does all this though depending on how much you want to achieve.
onMouseover="shElement('Hi
onMouseout="shElement('Hig
You can add as many as you like. Sometimes it may be better to call a function that does all this though depending on how much you want to achieve.
ASKER
Thanks, dij8. I understand the semicolons you added, but can you tell me what status='Highlight 2';return true;" in the first line and status='';return true;" in the second line mean?
Next, why would you have to identify shElement('Highlight3','hi
Last, where is a good place to start learning how to write these functions, what the parts mean, like status=, etc?
Next, why would you have to identify shElement('Highlight3','hi
Last, where is a good place to start learning how to write these functions, what the parts mean, like status=, etc?
I added the extra to show you that there is essentially no limit to how many you can have. Nor are you limited to the same function name. With your code this would generate an error because there is no "Highlight3", it was just a demonstration. The status thing is a demo of a different function call. In this instance it changes the status bar (the bar at the bottom that shows link locations as you hover over them). It changes to whatever is between the quotes. The "return true;" is necessary for the status thing to work.
Some of the sites I use a lot to work out scripting are:
http://www.devguru.com/Technologies/ecmascript/quickref/javascript_intro.html
http://www.dynamicdrive.com
and occasionally (but not often):
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/script56/html/js56jslrfjscriptlanguagereference.asp
I have a huge collection of links but these are my usual scripting ones.
Some of the sites I use a lot to work out scripting are:
http://www.devguru.com/Technologies/ecmascript/quickref/javascript_intro.html
http://www.dynamicdrive.com
and occasionally (but not often):
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/script56/html/js56jslrfjscriptlanguagereference.asp
I have a huge collection of links but these are my usual scripting ones.
ASKER
Thanks again dij8. Can I get a copy of the status function?
Also, I want to award you the 200 points for this question because this has been so beneficial to me.
I also owe a 100 points to CJ_S. How do I give him/her their points too?
Also, I want to award you the 200 points for this question because this has been so beneficial to me.
I also owe a 100 points to CJ_S. How do I give him/her their points too?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Boy I must have really screwed that last comment up. Here is what I meant to say;
You said 'The status thing is a demo of a different function call. In this instance it changes the status bar (the bar at the bottom that shows link locations as you
hover over them). It changes to whatever is between the quotes. The "return true;" is necessary for
the status thing to work.
What I was asking for was a copy of the function call that changed the status bar. It didn't change my status bar when I typed it as in your comment, so I assumed that 'status' was another function.
Next, I know how to award you these points dij8, and that is what I am going to do. What I am asking is how to give CJ_S 100 points also, not any of your 200 points.
Do I ask a new question with 'Points for CJ_S' or what?
You said 'The status thing is a demo of a different function call. In this instance it changes the status bar (the bar at the bottom that shows link locations as you
hover over them). It changes to whatever is between the quotes. The "return true;" is necessary for
the status thing to work.
What I was asking for was a copy of the function call that changed the status bar. It didn't change my status bar when I typed it as in your comment, so I assumed that 'status' was another function.
Next, I know how to award you these points dij8, and that is what I am going to do. What I am asking is how to give CJ_S 100 points also, not any of your 200 points.
Do I ask a new question with 'Points for CJ_S' or what?
Now I'm pretty much confused here...
ASKER
I am sorry CJ_S, I must be still asleep here! It has been a LOONNNNNNNGGGG night! This cold has taken me down bad. But that is no real excuse for reading the correct expert's name who has been helping me so much!
I thought I have been corresponding with dij8 for the last few messages. OK, here is what I want to do now. I want to award you these points because you answered what I asked, and more. Now, I also would like to award dij8 200 points, because I think that is the only 'fair' thing to do.
I know that I just click on the comment to accept it as an answer, and you will be awarded your points, how do I give dij8 his/her points?
I sure hope I made this plain. I appreciate everyone's help in this matter. It may seem like something small to you guys, but it has been a blessing to me.
I thought I have been corresponding with dij8 for the last few messages. OK, here is what I want to do now. I want to award you these points because you answered what I asked, and more. Now, I also would like to award dij8 200 points, because I think that is the only 'fair' thing to do.
I know that I just click on the comment to accept it as an answer, and you will be awarded your points, how do I give dij8 his/her points?
I sure hope I made this plain. I appreciate everyone's help in this matter. It may seem like something small to you guys, but it has been a blessing to me.
ASKER
Excellent answer! Thanks for all of your help. It is really appreciated.
Glad to be of service
Just ask a question titled "for dij8 (Q20182337)"
Regards,
CJ
Just ask a question titled "for dij8 (Q20182337)"
Regards,
CJ
status is a part of the DOM (Document Object Model) so in changing it all you are doing is referencing the status object. You could try window.status or top.status (especially if you are using frames). The best demonstration I can give is to have two identical links and see what happens when you do the mouseover thing.
<a href="http://dij8.com">outrageous poor taste plug for dij8's site</a>
<a href="http://dij8.com" onmouseover="status='visit
Hover over the top one (when coded in a page and not in this text of EE) and you will see the status bar change to "http://dij8.com". Hover over the bottom one and the status will change to "visit dij8.com". I add the onmouseout otherwise the status would stay on "visit dij8.com".
Once coded into a page if this doesn't work then try changing "status=" to "window.status=". You shouldn't need to though.
If you still need help with this then just ask. I am more than willing to help.
<a href="http://dij8.com">outrageous poor taste plug for dij8's site</a>
<a href="http://dij8.com" onmouseover="status='visit
Hover over the top one (when coded in a page and not in this text of EE) and you will see the status bar change to "http://dij8.com". Hover over the bottom one and the status will change to "visit dij8.com". I add the onmouseout otherwise the status would stay on "visit dij8.com".
Once coded into a page if this doesn't work then try changing "status=" to "window.status=". You shouldn't need to though.
If you still need help with this then just ask. I am more than willing to help.
ASKER
I posted a question for dij8 (Q20182337), as you stated CJ. Thanks again guys, I will have more questions soon, I am sure.
function shElement(lName, visStr)
{
obj = (document.layers)?document
if(obj && document.all) obj = obj.style;
if(obj) obj.visibility=visStr;
}
</script>
Now call the function like:
onMouseover="shElement('Hi
onMouseout="shElement('Hig
Regards,
CJ