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 Coder
    Join Date
    Jul 2002
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    On Mouseover, change image.

    Okay, I have been looking for a code that changes the image upon mouse-over, that is easy to use, and works in all browsers. This is needed for 5 images on the same page.

    Can anyone help me?

    Thanks in advance.

    -prwels
    Last edited by prwels; 07-22-2002 at 01:57 AM.

  • #2
    New Coder
    Join Date
    Jul 2002
    Location
    San Jose
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    script for swapping images with mouseover

    I just had this assignment in school. First, you need to preload images by storing them in a new image array. Also, if you are going to include a message in the status bar on mouseover, you need to create a variable for the status. (I listed those first.)

    Next, the imgOn() and imgOff() functions are what you will call on your mouseovers and mouseouts.

    Finally, make sure that your html image links have names that match those you used for you image object array and status variables (i.e., if your image is img1ON.gif, your status message should be img1Status. See the html code below this script.)

    <script language="JavaScript">
    <!-- hide

    var img1Status = "Click here to return to my list.";
    var img2Status = "Click here for a dropdown list and scrolling messages.";

    if (document.images){
    var img1ON = new Image();
    img1ON.src = "images/img1ON.gif";

    var img1OFF = new Image();
    img1OFF.src = "images/img1OFF.gif";

    var img2ON = new Image();
    img2ON.src = "images/img2ON.gif";

    var img2OFF = new Image();
    img2OFF.src = "images/img2OFF.gif";
    }

    function imgOn(imgName) {
    if (document.images) {
    document[imgName].src = eval(imgName + "ON").src;
    }
    status = eval(imgName + "Status");
    }
    function imgOff(imgName) {
    if (document.images) {
    document[imgName].src = eval(imgName + "OFF").src;
    }
    status = "";
    }
    // -->
    </script>

    --------------------------
    Then, in the body:

    <body>
    <A HREF="http://www.<yourlink>.com"
    onMouseOver="imgOn('img1'); return true;"
    onMouseOut="imgOff('img1')">
    <IMG SRC="images/img1OFF.gif" NAME="img1">
    </A>
    <BR>

    <BR>
    <A HREF="http://www.<yourotherlink>/index.htm"
    onMouseOver="imgOn('img2'); return true;"
    onMouseOut="imgOff('img2')">
    <IMG SRC="images/img2OFF.gif" NAME="img2" >
    </A>

    </body>

  • #3
    New Coder
    Join Date
    Jul 2002
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you. I am going to go set it all up...

    Thanks again.

  • #4
    New Coder
    Join Date
    Jul 2002
    Location
    San Jose
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    preloading the images

    Also, I found that I had difficulty getting the images to preload properly, although the script I sent you supposedly takes care of that. The way I got mine to work was to include this script right after the one I just gave you:

    <script language="JavaScript">
    <!-- hide

    preload("img1", "img1OFF.gif", "img1ON.gif");
    preload("img2", "img2OFF.gif", "img2ON.gif");

    // -->
    </script>

  • #5
    New Coder
    Join Date
    Jul 2002
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool

    Thank you SO MUCH! I tried it out and it works perfectly. Thanks again.

    -prwels


  •  

    Posting Permissions

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