Hi

I wish to toggle visible/invisible the content of a div, when another div is hovered. However, I want the return to visibility to be delayed. I have the following code:

<script language="javascript" type="text/javascript">
function toggleDisplay(id, action) { 
var el = document.getElementById(id); 
if (el != undefined) { 
if(action == 'visible' || action == 'hidden') { 
el.style.visibility = action; 
if(action =='visible'){ 
setTimeout('toggleDisplay("test","visible")', 2000); 
} 
} else { 
el.style.display = action; 
} 
} 
}
</script>

<div id="test">
This should vanish when text 'hover' is hovered. I would like it to reappear when 'hover' is no
longer hovered, but with a small timed delay
</div>

<div onmouseover="toggleDisplay('test', 'hidden');" onmouseout="toggleDisplay('test', 'visible');">
hover
</div>

But I can't get the time delay on mouseout. I can use a similar code to make something appear, and then vanish again after a timed delay. But I can't get it to happen this way round! Can you see what I should be doing?

Many thanks

Tony

Change the function to this:

function toggleDisplay(id, action) { 
var el = document.getElementById(id); 
if (el != undefined) { 
if(action == 'visible' || action == 'hidden') { 
if(action =='visible'){ 
setTimeout("document.getElementById('"+id+"').style.visibility='visible';", 2000); 
} 
else el.style.visibility = action; 
} else { 
el.style.display = action; 
} 
} 
}

Mega thanks. That works fine.


Best wishes

Tony