Mouseout delay?

[Carbon]

Hi,

Is there a way to delay an event once the mouseout event has been fired?

here is a test code...

<span style="visibility: hidden" onmouseover="this.style.visibility='visible'" onmouseout="this.style.visibility='hidden'">







<a href="build.php#1" hidefocus><img src="../images/website/jump processor.gif" width="16" height="16" border="0" alt="Click here to view PROCESSOR"></a>
<a href="build.php#2" hidefocus><img src="../images/website/jump chipset.gif" width="16" height="16" border="0" alt="Click here to view CHIPSET"></a>
<a href="build.php#3" hidefocus><img src="../images/website/jump graphics.gif" width="16" height="16" border="0" alt="Click here to view GRAPHICS"></a>
<a href="build.php#4" hidefocus><img src="../images/website/jump memory.gif" width="16" height="16" border="0" alt="Click here to view MEMORY"></a>
<a href="build.php#5" hidefocus><img src="../images/website/jump sound.gif" width="16" height="16" border="0" alt="Click here to view SOUND"></a>
<a href="build.php#6" hidefocus><img src="../images/website/jump hard drive.gif" width="16" height="16" border="0" alt="Click here to view HARD DRIVE"></a>
<a href="build.php#7" hidefocus><img src="../images/website/jump disc drive.gif" width="16" height="16" border="0" alt="Click here to view DISC DRIVE 1"></a>
<a href="build.php#8" hidefocus><img src="../images/website/jump disc drive.gif" width="16" height="16" border="0" alt="Click here to view DISC DRIVE 2"></a>
<a href="build.php#9" hidefocus><img src="../images/website/jump floppy drive.gif" width="16" height="16" border="0" alt="Click here to view FLOPPY DRIVE"></a>
<a href="build.php#10" hidefocus><img src="../images/website/jump power supply.gif" width="16" height="16" border="0" alt="Click here to view POWER SUPPLY"></a>
<a href="build.php#11" hidefocus><img src="../images/website/jump display.gif" width="16" height="16" border="0" alt="Click here to view DISPLAY"></a>
<a href="build.php#12" hidefocus><img src="../images/website/jump case.gif" width="16" height="16" border="0" alt="Click here to view CASE"></a>
<a href="build.php#13" hidefocus><img src="../images/website/jump keyboard.gif" width="16" height="16" border="0" alt="Click here to view KEYBOARD"></a>
<a href="build.php#14" hidefocus><img src="../images/website/jump mouse.gif" width="16" height="16" border="0" alt="Click here to view MOUSE"></a>
<a href="build.php#15" hidefocus><img src="../images/website/jump speakers.gif" width="16" height="16" border="0" alt="Click here to view SPEAKERS"></a>
<a href="build.php#16" hidefocus><img src="../images/website/jump windows.gif" width="16" height="16" border="0" alt="Click here to view WINDOWS"></a>
<a href="build.php#17" hidefocus><img src="../images/website/jump delivery.gif" width="16" height="16" border="0" alt="Click here to view DELIVERY"></a>
<a href="build.php#18" hidefocus><img src="../images/website/jump warranty.gif" width="16" height="16" border="0" alt="Click here to view WARRANTY"></a>
<a href="build.php#19" hidefocus><img src="../images/website/jump install.gif" width="16" height="16" border="0" alt="Click here to view INSTALL"></a>
<a href="build.php#20" hidefocus><img src="../images/website/jump themes.gif" width="16" height="16" border="0" alt="Click here to view THEMES"></a>
<a href="build.php#21" hidefocus><img src="../images/website/jump performance.gif" width="16" height="16" border="0" alt="Click here to view PERFORMANCE"></a>
<a href="build.php#22" hidefocus><img src="../images/website/jump backup.gif" width="16" height="16" border="0" alt="Click here to view BACKUP"></a>
<img src="../images/website/expand.gif" alt="MENU" style="visibility: visible">
</span>

What it does is create a line of clickable images then hides all of them apart from the last one, which when you mouseover then reveals all the others.

The problem is that the images are quite small so it's easy to move off the <span> while moving the pointer to the desired image. This then fires the mouseout event and hides the <span> so the user has to go back to the menu image to reveal the <span> again.

What I need is for the <span> to stay visible say for 5 seconds after the mouseout then hide the <span>.

I have tried using the setTimeout function but this seems to require calling a javascript function and I can't seem to crack that bit.

Also, just to make it a little bit harder the above code is part of an array and duplicates itself during the page load so you can't reference the <span> by an ID tag as each copy will have the same ID.

Cheers in advance for any help

Carbon

[samliew]

<script type="text/javascript"><!--
function hideDiv() {
document.getElementById("someLayer").style.visibil ity="hidden";
}
//--></script>

<span id="someLayer" style="visibility: hidden" onmouseover="this.style.visibility='visible';" onmouseout="javascript:setTimeout(hideDiv, 3000);">

Note: the 3000 in the setTimeout() means 3 secs.

[Carbon]

Hi Sam,

Thanks for posting, I had tried a similar solution before and although it works it needs each <span> ID to be different.

As stated in my original post, the code is replicated during the document write so each span would end up with the same ID and thus the code fails.

The best result so far has been with....

onmouseout="window.setTimeout('this.style.visibili ty=\'hidden\'', '5000')">

which does wait before trying to hide the span, but complains that "this.style" is not an object.

Cheers for trying to help and hopefully someone can come up with a solution that doesn't use ID.

Carbon

[¥åßßå]

<script type="text/javascript">

var yObj = '';

function hideme(ypObj){
yObj = ypObj;

window.setTimeout('yObj.style.visibility = "hidden" ', 5000);
}
</script>
<span onmouseout='hideme(this)'>Hello world</span>

¥

[Carbon]

Yabba,

Once again you have proved yourself to be a very generous and talented guy! Your code worked a treat so thank you very much, I really appreciate it.

When the time comes that I can afford the luxury of having a dedicated code-meister I'll be knocking at your door with a job offer!

Just out of curiosity, what is it that you currently do for a living?

Thanks again

Carbon

edit:

Spoke too soon, the code seems to work, but if you play around with it for a while the <span> area starts to hide whilst the pointer is still over it within approx one second... any ideas?

[samliew]

(building on Yabba's code):

<script type="text/javascript">
var obj = "";
var checkIt;

function hideme(obj){
obj.style.visibility = "hidden";
}
function checkActive(obj) {
if (isNaN(checkIt)==false) clearTimeout(checkIt);
checkIt = setTimeout(hideme(obj), 3000);
}
function cancelCheck() {
clearTimeout(checkIt);
}
</script>
<span onmouseout="checkActive(this);">Hello world</span>

[¥åßßå]

Spoke too soon, the code seems to work, but if you play around with it for a while the <span> area starts to hide whilst the pointer is still over it within approx one second... any ideas?

If you're still having a problem can you post a link?

In answer to what I do, I spend my summers bimbling round a field and my winters bimbling round the web

¥

[Carbon]

Hi Yabba,

I've just u/l a test example for you to have a look at. The "reveal the span" button is the letter "M" found above the top right corner of each "product" cell (not the top two).

http://www.microbuild.com/microbuild...ents/test.html

Have fun

Carbon

[¥åßßå]

Hi Carbon,

Sorry, I've been a tad innundated with work.

Ok, your problem is that the moment you hover over one of the links the "mouseout" is being triggered.

When I get a chance I'll rip apart a drop-down I have on a site, that should work for what you want, and post a solution.

It may take me a couple of days to free up enough time though, so don't hold your breath or you'll look like a smurf

¥