About setTimeOut

wagoo · Oct 13, 2007, 01:15 AM

here is the problem:

on a web page I'm putting together, the side menu has a "onMouseOver" function that makes some text appear elswhere on the page. The text disappears again "onMouseOut".

For exemple:

one link in the side menu is called "Librairy"
when the mouse is over the link, a text message saying "a selection of useful web resources" pops up elsewhere on the page. When the mouse moves away from this link (onMouseOut), the message disapears, and if the mouse is moved over a different link, a different message pops-up instead, etc.

So far everything works fine. The problem is that I would like to set a time delay of about 2 or 3 seconds between the moment the mouse is move way from the link (onMouseOut) and the moment the javascript that makes the text go away is executed.

It sounds simple enough. I copied different versions of javascript that are supposed to do just that, but it just doesn't work! I really spent many hours making sure that I didn't overlook a little detail as it is ofte the case...

Here is the part of the javascript in the <head> section:

function change(html){
dynamictext.innerHTML=html
}

dynamictext is the id of the <div> tag which holds the text that appears or disappears.. More specifically, the tag looks like this:
<div id="dynamictext" class="menu">   </div>

the part of the javascript located in the <a> tag, where the mouseOver and mouseOut stuff happens looks like this:

<a class="menu" href="librairy.html" onMouseOver="javascript:change('a selection of useful web resources')" onMouseOut="javascript:change(' ')">Librairy</a>

Until that point everything works just the way it is supposed to.

To achieve the desired time delay effect I introduced a setTimeout() function in there. To keep the posting shorter I will only paste the part pertaining to the onMouseOut event. It looks like this:

onMouseOut="setTimeout('change(' ')',3000)">L ibrairy</a>

I also tried similar versions, such as: onMouseOut="window.setTimeout('change(' ')',3 000)"

and also: onMouseOut="window.setTimeout('javascript:change('  ')',3000)"

In all cases the result is that the "onMouseOut" event is simply ingnored. I tested the webpage in Firefox and IE.

can anyone tell me where I have been wrong, or suggest an alternative script that can achieve the effect.

jstrike · Nov 27, 2007, 07:58 AM

Ok, I know this post is a month and a half old but...

This will set some text in an area when you mouse over the link and then 3 seconds later clear the text out if you mouse out and don't mouse over anything else.

Code:

<html>
<body>
<script>
var delayTime=3000;

function showDesc(dsc) {
	document.getElementById("descArea").innerHTML = dsc;
}

function hideDesc() {
	setTimeout("showDesc('&nbsp;')", delayTime);
}
</script>
<table width="300">
	<tr>
		<td id="descArea" style="border: thin black solid;">&nbsp;</td>
	</tr>
	<tr>
		<td style="padding-top:1em;">
			<a href="#" onmouseover="javascript:showDesc('This is desc 1');" onmouseout="javascript:hideDesc()">Hover here 1</a>
		</td>
	</tr>
	<tr>
		<td>
			<a href="#" onmouseover="javascript:showDesc('This is desc 2');" onmouseout="javascript:hideDesc()">Hover here 2</a>
		</td>
	</tr>
	<tr>
		<td>
			<a href="#" onmouseover="javascript:showDesc('This is desc 3');" onmouseout="javascript:hideDesc()">Hover here 3</a>
		</td>
	</tr>
</table>
</body>
</html>

Add your answer here.