[Javascript] show/hide layers on mouseover

Wed Apr 21 06:38:40 CDT 2004

Cheers Matt for looking at it.

I used what you said and did this, heres an example of what I did to the 
first link

Code:
------------------------------------------------

<a href="#"  onMouseOver="toggle('testLayer1');return false;">Open and 
Close</a>
</div>
<div id="testLayer1" style="display: none;" 
onMouseOut="toggle('testLayer1');return false;">A description</div>

------------------------------------------------

This was so the sublinks below the link I hovered over stay visible, even 
when I hover off the main link. So now I think it works.....what do you 
reckon............is this the best way to go about it...???

Alan...

>From: "Matt Barton" <javascript at mattbarton.org>
>Reply-To: "[JavaScript List]" <javascript at LaTech.edu>
>To: "[JavaScript List]" <javascript at LaTech.edu>
>Subject: Re: [Javascript] show/hide layers on mouseover
>Date: Wed, 21 Apr 2004 09:51:16 +0100
>
>Hi Alan.
>
>I've hacked about with your hacked together code, and if I understand what
>you want correctly, it should do the trick.  I've only tested this in IE6,
>but I'm not aware of any IE specific techniques I've used.
>
>Let me know if it's no good...
>
>Matt
>
>---------------
><html><head>
><script>
>function toggle(theDiv) {
>     var elem = document.getElementById(theDiv);
>     elem.style.display = (elem.style.display == "none")?"":"none";
>}
>//-->
></script>
></head>
><body>
>
>  <div id="test" onMouseOver="toggle('testLayer1');return false;"
>onMouseOut="toggle('testLayer1');return false;">
>   <a href="#">Open and Close</a>
>   <div id="testLayer1" style="display: none;">A description</div>
>  </div>
>
>
>  <div id="Div1" onMouseOver="toggle('testLayer2');return false;"
>onMouseOut="toggle('testLayer2');return false;">
>   <a href="#">Open and Close</a>
>   <div id="testLayer2" style="display: none;">A description</div>
>  </div>
>
>
>  <div id="Div2" onMouseOver="toggle('testLayer3');return false;"
>onMouseOut="toggle('testLayer3');return false;">
>   <a href="#">Open and Close</a>
>   <div id="testLayer3" style="display: none;">A description</div>
>  </div>
>
>
></body>
></html>
>-------------
>----- Original Message -----
>From: "Alan Easton" <alaneaston666 at hotmail.com>
>To: <javascript at LaTech.edu>
>Sent: Wednesday, April 21, 2004 9:38 AM
>Subject: [Javascript] show/hide layers on mouseover
>
>
> > Hello People,
> >
> > I am looking for a menu structure. If I simply had 4 links, one under 
>the
> > other, I would like to mouseover the 1st link, and all its sub-links to
> > appear underneath it, simply shifting the remaining 3 links down. Then I
> > could simply move to the sublinks and click on them, or move off the 
>link
> > and sub-links and they would all dissappear, and the other 3 links would
> > move back up in order.......I hope I have explained that well enough. I
>have
> > hacked a piece of code that does what I want by clicking the link, and
>then
> > clicking the link again to make the sub-links dissappear, but I want it 
>to
> > occur on mouseover........any ideas
> >
> > Code:
> > --------------------------------------------------------------
> >
> > <html><head>
> > <script>
> > function toggle(theDiv) {
> >     var elem = document.getElementById(theDiv);
> >     elem.style.display = (elem.style.display == "none")?"":"none";
> > }
> > //-->
> > </script>
> > </head>
> > <body>
> > <div id="test">
> > <a href="#" onclick="toggle('testLayer1');return false;">Open and
>Close</a>
> > </div>
> > <div id="testLayer1" style="display: none;">A description</div>
> >
> > <div id="Div1">
> > <a href="#" onclick="toggle('testLayer2');return false;">Open and
>Close</a>
> > </div>
> > <div id="testLayer2" style="display: none;">A description</div>
> >
> > <div id="Div2">
> > <a href="#" onclick="toggle('testLayer3');return false;">Open and
>Close</a>
> > </div>
> > <div id="testLayer3" style="display: none;">A description</div>
> > </body>
> > </html>
> >
> > --------------------------------------------------------------
> >
> > Browser compatibility is for it to hopefully work in version 4 browsers
>and
> > above, but IE5 and NN6 and above would do.
> >
> > Any help with this would be greatly appreciated.
> >
> > Thanks for your time,
> >
> > Alan...
> >
> > _________________________________________________________________
> > It's fast, it's easy and it's free. Get MSN Messenger today!
> > http://www.msn.co.uk/messenger
> >
> > _______________________________________________
> > Javascript mailing list
> > Javascript at LaTech.edu
> > https://lists.LaTech.edu/mailman/listinfo/javascript
> >
> > --
> > This email has been verified as Virus free
> > Virus Protection and more available at http://www.plus.net
>
>_______________________________________________
>Javascript mailing list
>Javascript at LaTech.edu
>https://lists.LaTech.edu/mailman/listinfo/javascript

_________________________________________________________________
It's fast, it's easy and it's free. Get MSN Messenger today! 
http://www.msn.co.uk/messenger