Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript image swap effect

    I am using an 'image swap' on mouseover effect for my menu on my site. It is located at http://www.matthewedward.ca. However, only the first link on the menu (Home) will work. A snippet from the original is as follows:

    image01= new Image()
    image01.src="test.gif"
    image02= new Image()
    image02.src="test2.gif"

    So I tweaked it to add another (image03 and image04) mouseover and mouseout image like so:

    image01= new Image()
    image01.src="test.gif"
    image02= new Image()
    image02.src="test2.gif"
    image03= new Image()
    image03.src="test3.gif"
    image04= new Image()
    image04.src="test4.gif"

    However, the images I added in the code don't work.

    Here is the other piece of code where the menu is displayed:

    <a href="index.shtml" onmouseover="rollover('Home', image02)"
    onmouseout="rollover('Home', image01)">
    <img src="/images/Home_off.jpg" name="Home" border="0"><a href="a href="aboutus.shtml" onmouseover="rollover('Aboutus', image04)"
    onmouseout="rollover('Aboutus', image03)"></a><img src="/images/aboutus_off.jpg" name="Aboutus" border="0"><img src="/images/Portfolio_off.jpg" width="144" height="60" /><img src="/images/development_off.jpg" width="175" height="60" /><img src="/images/design_off.jpg" width="119" height="60" /><img src="/images/services_off.jpg" width="131" height="60" /><img src="/images/request_off.jpg" width="182" height="60" /><br />
    <br />

    So, in conclusion, how do I add multiple images to work for the mouseover swap? So far, only the home link (home_on.jpg and home_off.jpg or 'image01' and 'image02') will work. Help!

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    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[*/
    image01= new Image()
    image01.src="http://www.vicsjavascripts.org.uk/StdImages/3.gif"
    image02= new Image()
    image02.src="http://www.vicsjavascripts.org.uk/StdImages/4.gif"
    image03= new Image()
    image03.src="http://www.vicsjavascripts.org.uk/StdImages/5.gif"
    image04= new Image()
    image04.src="http://www.vicsjavascripts.org.uk/StdImages/6.gif"
    
    function rollover(id,img){
     document.getElementById(id).src=img.src;
    }
    /*]]>*/
    </script></head>
    
    <body>
    <a href="index.shtml" onmouseover="rollover('Home', image02)" onmouseout="rollover('Home', image01)">
     <img src="http://www.vicsjavascripts.org.uk/StdImages/1.gif" id="Home" border="0">
    </a>
    <a href="aboutus.shtml" onmouseover="rollover('Aboutus', image04)" onmouseout="rollover('Aboutus', image03)">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/2.gif" id="Aboutus" border="0">
    </a>
    <br />
    <br />
    
    </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
    Regular Coder
    Join Date
    May 2012
    Location
    France
    Posts
    224
    Thanks
    0
    Thanked 32 Times in 30 Posts
    Your script use the function rollover which use the document.images object collection.
    Code:
    function rollover(imagename, newsrc){
    document.images[imagename].src=newsrc.src
    }
    But this collection (see this w3scholls.com page) is not indexed with the image names !
    Last edited by 007julien; 11-27-2012 at 03:29 PM.

  • #4
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't understand...

  • #5
    Regular Coder
    Join Date
    May 2012
    Location
    France
    Posts
    224
    Thanks
    0
    Thanked 32 Times in 30 Posts
    The images collection is : images[0], images[1], images[2] ... in the order the images appears on the page which differs from images[imagename1], images[imagename2], images[imagename3] ... !


  •  

    Posting Permissions

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