Time delay on mouseOut action

[JackTheTripper]

Trying to set a time delay that works like this. You have 2 images. onMouseOver each image shows a different layer. OnMouseOut I want it to hide the layer after 10 seconds UNLESS image 2 is moused over. Then I want image 2's layer to show and to cancel the delay to make layer 1 hide. Make sense? I had it working but it was buggie in that if you moused over image 1 then out of image 1 and 5 seconds later moused over image 2, even though you don't mouse out of image 2 the image 2 layer would hide.

I didn't include the function for showing/hiding the layers as I didn't think it was important.

Thanks in advance for any help.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


<script>

function resetLayers() {
MM_showHideLayers('layer1','','hide')
MM_showHideLayers('layer2','','hide')

}

function delayReset() {
for (i=0; i<10; i++) {
if (isOver == true) {
return
}
setTimeout('',1000)
}

resetLayers()
}

var isOver

</script>

<img src= "images/image1.gif" onMouseOver="isOver = true; resetLayers(); MM_showHideLayers('layer1','','show')" onMouseOut= "isOver = false; delayReset();">

<br><br>

<img src= "images/image2.gif" onMouseOver="isOver = true; resetLayers(); MM_showHideLayers('layer2','','show')" onMouseOut= "isOver = false; delayReset();">

<div id="layer1" style="position:absolute; left:172px; top:130px; width:259px; height:257px; z-index:1; visibility: hidden"> foo </div>

<div id="layer2" style="position:absolute; left:172px; top:130px; width:259px; height:257px; z-index:1; visibility: hidden"> foo also </div>

[gil davis]

To cancel a timeout, you must assign it to a variable and use clearTimeout(variable) to stop it.var timer = setTimeout('funcName()', 10000);
...
clearTimeout(timer);I'm a bit confused by your code, as it does not seem to follow your logic.<script>
function hideIt(it, tmr) {
clearTimeout(tmr); // always stop the timer
MM_showHideLayers(it,'','hide');
}

function showIt(it, tmr);
tmr = setTimeout("MM_showHideLayers('" + it + "','','show'), 10000);
}
</script>
...
< ... onmouseover="hideIt('layer1',timer2)" onmouseout="showIt('layer1',timer1)" ... >
...
< ... onmouseover="hideIt('layer2',timer1)" onmouseout="showIt('layer2',timer2)" ... >This is not exactly what you asked for, but it should give you enough of an idea of how you should use the setTimeout() and clearTimeout() functions.

[JackTheTripper]

Thanks. I can make it work with the clearTimeout. Didn't know about that command.