Advanced Search

Results 1 to 3 of 3

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

  1. #1
    Join Date
    Aug 2010
    Location
    United States
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default 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:

    (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

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,707
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

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

    blurrycode (10-28-2010)

  4. #3
    Join Date
    Aug 2010
    Location
    United States
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks, this is exactly what I need.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •