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

Printable View

10-27-2010, 01:42 AM
blurrycode

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

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
10-27-2010, 09:54 AM
vwphillips

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>
10-28-2010, 10:18 PM
blurrycode

Thanks, this is exactly what I need.