Disjointed Image Rollover with Delay

Adding a delay to mouseout or with-in the function itself

[itaine]

I found the cleanest disjointed rollover script on [daxassist.com...]

<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
<!--
//JavaScript Disjointed Image Rollover Code
//copyright daxassist, 2000-2004
//visit [daxassist.com...] for this and other javascripts with full tutorials.

if(document.images) {
pics = new Array();
pics[01] = new Image();
pics[01].src = "clear.gif";
pics[02] = new Image();
pics[02].src = "button-image-1-off.gif";
pics[03] = new Image();
pics[03].src = "button-image-1-on.gif";
pics[04] = new Image();
pics[04].src = "disjointed-image-1.gif";
}
function changer2(from,to,from1,to1) {
if(document.images) {
document.images[from].src = pics[to].src;
document.images[from1].src = pics[to1].src;
}
}
//-->
</SCRIPT>

<a href="yourpage.php" onMouseOver="changer2('img1',2,'holder',4);" onMouseOut="changer2('img1',3,'holder',1);"><img name="img1" id="img1" border="0" width="145" height="37" src="button-image-1-off.gif" alt="Example 1"></a>

Can anyone suggest how a delay could be added to the onmouseout portion only?

I tried wrapping setTimeout around the onmouseout, but to no avail. I think the modification has to happen in the javascript function itself.

Taine

[Rambo Tribble]

I believe that upstart CSS crowd has managed something very like this without a stitch of script. Cunning punters, they are. You might want to wander about in that forum a bit. Ask for Suzy and tell 'em ol' What's 'is Name sent you.

[Bernard Marx]

I'd be surprised if even the Zen masters could put a timed delay in a CSS rollover.

[Bernard Marx]

..but using the CSS background shift technique can save bandwidth, and the need to preload images, even for scripted versions
(enter problems with flicker in IE, for certain cache settings)

This function should work for a delay. It does require an extra argument sent on the onmouseout handler, eg:

onMouseOut="changer2('img1',3,'holder',1,500);"

------------------

function changer2(from,to,from1,to1,delay) {
  if(!document.images) return;
  function execute(){
    document.images[from].src = pics[to].src;
    document.images[from1].src = pics[to1].src;
  }
  delay? setTimeout(execute,delay) : execute();
}

I can assure you that it is 100% untested at this time.

[itaine]

Yoooooooo Bernard Marx!

Thx a million man. Works like a charm!
Really 'preciate it.

Taine :-)