dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: Image Swap on Mouseover

  1. #1
    Join Date
    Nov 2012
    Posts
    1

    Image Swap on Mouseover

    Okay so after a lot of trial and error. I found a code to swap images on mouseover, then back again on mouseout.
    I am going to use this for my website menu. The only problem is that the code does not work when I add muliple
    images. The original code uses

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

    So I simply added image03 and image04 like this:

    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"

    This did not work.

    Here is the code I am using in my <body>:

    <a href="#" onmouseover="rollover('Home', image02)"
    onmouseout="rollover('Home', image01)">
    <img src="/images/Home_off.jpg" name="Home" border="0"></a><a href="#" onmouseover="rollover('Aboutus', image04)"
    onmouseout="rollover('Aboutus', image03)"></a><img src="/images/aboutus_off.jpg" name="Aboutus" border="0">

    This is the code I am using in my <head>:

    <script type="text/javascript">
    <!--
    image01= new Image()
    image01.src="/images/Home_off.jpg"
    image02= new Image()
    image02.src="/images/Home_on.jpg"
    image03= new Image()
    image03.src="/images/aboutus_off.jpg"
    image04= new Image()
    image04.src="/images/aboutus_on.jpg"

    function rollover(imagename, newsrc){
    document.images[imagename].src=newsrc.src
    }
    //-->
    </script>

    The link to where I found the code: http://www.javascriptkit.com/javatutors/image4.shtml

    My website where I will be using the code for the menu. (Bottom menu): http://www.matthewedward.ca

    Any help would be greatly appreciated. Thank you.

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    It appears you found the solution.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles