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:

(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

Code:

<!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.

Thread: Image hover and roll-over triggers the roll-over of another image

Thread Tools

Search Thread

Image hover and roll-over triggers the roll-over of another image

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

Bookmarks

Bookmarks

Posting Permissions