[Javascript] show/hide layers on mouseover

Wed Apr 21 03:38:01 CDT 2004

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