Rollover ImageSwap Delay on Mouseout Change

**chardar** · 05-20-2008, 07:48 AM

Hi all, i am new here But i am hoping you can help me with a javascript i am using. I have it working fine where when you rollover any image in a group of images it changes a seperate image to give information about the thumbnail you are rolling over. However i would like to if possible add a delay on the mouseout change so that as you rollover different images it doesn't keep flashing back to the original image.....

Here is my code:

Code:

<head>
<SCRIPT language="JavaScript">
<!--
if (document.images)
{
image_off= new Image(200,300);
image_off.src="images/sidebarmus.png";

image2= new Image(200,300);
image2.src="images/sidebarhermitage.gif";
image3= new Image(200,300);
image3.src="images/sidebarhorniman.gif";
image4= new Image(200,300);
image4.src="images/sidebarmaritime.gif";
image5= new Image(200,300);
image5.src="images/sidebarseedbank.gif";
image6= new Image(200,300);
image6.src="images/sidebarroyalalbert.gif";
image7= new Image(200,300);
image7.src="images/sidebarjohnsoanes.gif";
image8= new Image(200,300);
image8.src="images/sidebarwhitetower.gif";
image9= new Image(200,300);
image9.src="images/sidebarva.gif";
}

function change1(picName,imgName)
{
if (document.images)
{
imgOn=eval(imgName + ".src");
document[picName].src= imgOn;
}
}

//-->
</SCRIPT>
</head>

and then

Code:

onMouseover="change1('pic1','image2')"
onMouseout="change1('pic1','image_off')">

for the different thumbnails...

i tried

Code:

function change2(picName,imgName,Delay)
{
if (document.images)
{
imgOn=eval(imgName + ".src");
document[picName].src= imgOn;
}
delay? setTimeout(execute,delay) : execute();
}

and then:

Code:

onMouseout="change2('pic1','image_off',500)">

but that didn't seem to work.

Any help would be greatly appreciated

**jscheuer1** · 05-20-2008, 02:30 PM

As far as I know, there is no 'execute' method in javascript. And no reason to have a second function for this. Also, there is no reason to use eval here, but I'm not going to worry about that right now. Your one function could be like:

Code:

function change1(picName,imgName,delay){
if(delay){
setTimeout(function(){change1(picName,imgName);}, delay);
return;
}
if (document.images){
imgOn=eval(imgName + ".src");
document[picName].src= imgOn;
}
}

Then, if it is called with a delay, it will delay. If no delay is specified, it will execute as soon as it is called.

**chardar** · 05-21-2008, 07:42 AM

Thanks!

works a treat

so simple in the end

i shoulda got that one! eheh

**chardar** · 05-21-2008, 07:49 AM

having said that. It seems to be not quite working...

the images are swapping after a time on mouseover.

I will roll over and they swap then as i am reading the info they swap back and the mouse is still over.

infuriating javascript! eheh

any ideas? Seems to be the different change function thats causing it.

**jscheuer1** · 05-21-2008, 09:35 AM

There are a number of reasons why this might be happening. The most likely is that you rollover, then off, then back over again before the delay has happened. In a case like that, the image would still revert when the delay expires, even if you are still over the image at that point. Also a possibility is some confusion on the part of the browser due to many undeclared variables in the global scope combined with the use of eval. Here's a simple tested demo that fixes all of that, as well as uses valid HTML code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Rollover Demo w/onmouseout delay</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
if (document.images)
{
var image_off = new Image();
image_off.src="photo9.jpg";

var image2 = new Image();
image2.src="photo4.jpg";

}

function change1(picName,imgName,delay){
if(change1['timer'+picName])
clearTimeout(change1['timer'+picName]);
if (document.images)
if(delay){
change1['timer'+picName]=setTimeout(function(){change1(picName,imgName);}, delay);
return;
} else
document[picName].src = imgName.src;
}

//-->
</script>
</head>
<body>
<img name="pic1" src="photo9.jpg" alt=""
onmouseover="change1('pic1', image2)"
onmouseout="change1('pic1', image_off, 500)">
</body>
</html>

There could still be other problems, if you need more help:

Please post a link to the page on your site that contains the problematic code so we can check it out. And let us know what browser you are using.

Notes: A number of things have changed, all variables are now formally declared, each picture has its own property of the function to act as a timeout monitor, and we dispense with both quoting of the second argument when calling the function as well as the 'evil' eval.

**chardar** · 05-21-2008, 01:07 PM

that script is for a rollover that changes its own image tho right?

i have an image X and images 1-8 where when u rollover image 1-8 it changes images X to show details of each image 1-8.

I realise its the same concept, but i can't get that script to work the way i described =/.

I have been testing the page in IE 7 and Firefox.

If you want to see the page, which script would u wanna see? the original? or one of the ones you suggested?

**jscheuer1** · 05-21-2008, 01:55 PM

I would want to see the one that is closest to doing what you actually want done. If they are all equally bad though, perhaps I'd like to see them all. However, if I understand this new information correctly, you want to be able to rollover one image (or possibly even a link, we'll call this a 'trigger') and have it change another image (we'll call this the 'main image'). The main image should remain changed for a reasonable amount of time so the user can rollover it before it reverts back. So far we have that. But now you also want the main image to remain for the entire time that the user is hovering over it as well.

There are two basic choices:

The trigger doesn't have any onmouseout, but the main image does. With this approach there is no reverting back for the main image unless it is moused out or a different trigger is activated.
The trigger has a delayed mouseout to revert the main image, but if the main image is hovered before this delay expires, it's cancelled. Then when the user moves the mouse off the main image, a new (perhaps shorter) delayed mouseout event occurs to revert the main image. If the user hovers back over the main image in time the main image will not yet revert. Only when the user has stayed off the main image for the specified period, or moves to another trigger will the main image revert or change.

I prefer method two:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Rollover Demo w/onmouseout delay</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
if (document.images)
{
var image_off = new Image();
image_off.src="photo9.jpg";

var image2 = new Image();
image2.src="photo4.jpg";

}

function change1(picName,imgName,delay){
if(change1['timer'+picName])
clearTimeout(change1['timer'+picName]);
if (document.images && imgName)
if(delay){
change1['timer'+picName]=setTimeout(function(){change1(picName,imgName);}, delay);
return;
} else
document[picName].src = imgName.src;
}

//-->
</SCRIPT>
</head>
<body>
<img src="trigger1.jpg" alt=""
onmouseover="change1('pic1', image2)"
onmouseout="change1('pic1', image_off, 600)"><br>
<img name="pic1" src="photo9.jpg" alt=""
onmouseover="change1('pic1')"
onmouseout="change1('pic1', image_off, 500)"><br>
</body>
</html>

**chardar** · 05-21-2008, 02:43 PM

just getting js errors on the page now

uploaded the page now:

http://www.benbowgroup.co.uk/new/dropdown/museum.html

bit messy i know.... but its a work in progress :P

Thanks for your efforts so far

**jscheuer1** · 05-22-2008, 02:15 PM

Well my latest demo works in fairly extensive testing, and I see you are not using it. If I get some time I will take a shot at trouble shooting your page. I see you are using a number of scripts though, I'd suggest getting rid of the rollover code altogether and making sure the rest is working. At that point it would be a fairly simple matter for me to help you integrate the rollover code into it.

You do have some typos that are easy to see (highlighted and red):

Code:

if (document.images)
{
var image_off = new Image(200,300);
image_off.src="images/sidebarmus.png";

var image2 = new Image(200,300);
image2.src="images/sidebarhermitage.gif";

var image3 = new Image(200,300);
image3.src="images/sidebarhorniman.gif";
}

var image4 = new Image(200,300);
image4.src="images/sidebarmaritime.gif";
}

var image5 = new Image(200,300);
image5.src="images/sidebarseedbank.gif";
}

var image6 = new Image(200,300);
image6.src="images/sidebarseedbank.gif";
}

var image7 = new Image(200,300);
image7.src="images/sidebarseedbank.gif";
}

var image8 = new Image(200,300);
image8.src="images/sidebarseedbank.gif";
}

var image9 = new Image(200,300);
image9.src="images/sidebarseedbank.gif";
}
function change1(picName,imgName,delay){
if(change1['timer'+picName])
clearTimeout(change1['timer'+picName]);
if (document.images)
if(delay){
change1['timer'+picName]=setTimeout(function(){change1(picName,imgName);}, delay);
return;
} else
document[picName].src = imgName.src;
}

All of which shouldn't be there, probably a copy and paste error.

**chardar** · 05-22-2008, 03:11 PM

well what do u know.....

after removing those brackets it all works perfectly! Thank you so much

That'll teach me to be lazy and copy/paste all the var images :|. Musta copied the } off the end of the last original one...

Thread: Rollover ImageSwap Delay on Mouseout Change

Thread Tools

Search Thread

Rollover ImageSwap Delay on Mouseout Change

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions