help with show/hide divs

[scope999]

hey all,
what im trying to do, is that i have a row of links for a horizontal nav....each link has an accompanying div to hold its sub nav links. those accompanying divs get toggled depending on which link you mouse over.

i have it working...mostly
but im not smart enough to finsih it off. :(

what i would like to do, is to be able to have a particular div displayed by default ...(i got that part) and i would like to have that default div restored when you are no longer "exploring" the nav.

<script type="text/javascript">

//global variables

var timerID = null;
var timerOn = false;
var timecount = 500;

function setcurrent(){

var currentpage = document.getElementById("layer1");
currentpage.style.display="block";
}
function initnav(){

setcurrent();

}

// show or hide the layers
function showLayer(layerName){

document.getElementById(layerName).style.display="block";
}

function hideLayer(layerName){
document.getElementById(layerName).style.display="none";

}

function hideAll(){
hideLayer('layer1');
hideLayer('layer2');
hideLayer('layer3');
hideLayer('layer4');
hideLayer('layer5');

}

function startTime() {
if (timerOn == false) {
timerID=setTimeout( "hideAll()" , timecount);
timerOn = true;

}

}

function stopTime() {
if (timerOn) {
clearTimeout(timerID);
timerID = null;
timerOn = false;

}

}

</script>

and the body html is as follows..

<a href="#" onMouseOver="hideAll(); showLayer('layer1'); stopTime()" onMouseOut="startTime();">huh</a>
<a href="#" onMouseOver="hideAll(); showLayer('layer2'); stopTime()" onMouseOut="startTime();">huh</a>
<a href="#" onMouseOver="hideAll(); showLayer('layer3'); stopTime()" onMouseOut="startTime();">huh</a>
<a href="#" onMouseOver="hideAll(); showLayer('layer4'); stopTime()" onMouseOut="startTime();">huh</a>
<a href="#" onMouseOver="hideAll(); showLayer('layer5'); stopTime()" onMouseOut="startTime();">huh</a>
<div id="layer1" style="display:none;"><a href="#" onMouseOver="stopTime();" onMouseOut="startTime();">wa11</a></div>
<div id="layer2" style="display:none;"><a href="#" onMouseOver="stopTime();" onMouseOut="startTime();">wa22</a></div>
<div id="layer3" style="display:none;"><a href="#" onMouseOver="stopTime();" onMouseOut="startTime();">wa33</a></div>
<div id="layer4" style="display:none;"><a href="#" onMouseOver="stopTime();" onMouseOut="startTime();">wa44</a></div>
<div id="layer5" style="display:none;"><a href="#" onMouseOver="stopTime();" onMouseOut="startTime();">wa55</a></div>
<script>
initnav()
</script>

so what happens is that when the page loads... layer 1 is visible... then when you mouseover any other link, the appropriate divs are then toggled.

what i cant figure out, is how to restore that first default div.

hope that made some sense,
thanks in advance for any help

[birdbrain]

Hi there scope999,

have a look at this thread, it may help...

[webmasterworld.com ]

birdbrain

[scope999]

thanks birdbrain, i actually saw that thread

what im trying to do is add to the javascript menu i grabbed off of this thread...
[webmasterworld.com...]

intsead of toggling with a click...it does it with a mouseover and a timer.

BUT it leaves all the divs hidden when you are done "exploring" ...what im feebly trying to do, is to be able to pick a default div that will "return" to view when a user stops rolling over anything.