Image hover and roll-over triggers the roll-over of another image [Archive]

View Full Version : Image hover and roll-over triggers the roll-over of another image

blurrycode

10-27-2010, 01:42 AM

Hi,

In the website I'm developing, I'm looking to have a image swap when it is hovered over, and simultaneously swap the image of another image.
Here's a basic diagram of the sequence of what should happen:

http://msaacke.rmsaacke.com/rolloverexample.html (it seems that this image only displays in firefox)

I'm already using a tiny bit of javascript for the image rollover. This seems like it should be pretty simple to me, but I haven't been able to find anything on it anywhere. If this turns out to be complicated to code, I would be willing to pay you for your time.

Thanks

vwphillips

10-27-2010, 09:54 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/

function Swap(img,src){
img=typeof(img)=='object'?img:document.getElementById(img);
if (img&&typeof(src)=='string'){
img.src=src;
}
}

/*]]>*/
</script></head>

<body>
<img id="img1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100"
onmouseover="Swap(this,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif');Swap('img2','http://www.vicsjavascripts.org.uk/StdImages/Four.gif');"
onmouseout="Swap(this,'http://www.vicsjavascripts.org.uk/StdImages/One.gif');Swap('img2','http://www.vicsjavascripts.org.uk/StdImages/Three.gif');"

/>

<img id="img2" src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="100" height="100" />

</body>

</html>

blurrycode

10-28-2010, 10:18 PM

Thanks, this is exactly what I need.