Mouseover Event IV

JavaScript Mouseover Event Image Changer, Version 4

This is a much-simplified version of the multiple-image Mouseover technique. To try it, position your mouse pointer over any image below to see a different image, and then move the pointer off the image to restore it. As usual, you must have Netscape 3.0 or higher or Internet Explorer 4.0 for this to work.

This technique downloads each "on" image on-the-fly, so you must use very small images or else your visitors will experience a delay before the "on" image appears.

Okay let's see what's happening:

First of all, set up your images as follows:

You need two images: the regular image and an "on" image that's displayed when the user hovers the mouse pointer over the regular image.
The "on" image must have the same name as the regular image, except with "-on" added. For example, the "BOOKS" image, above, uses books.gif for the regular image, and books-on.gif for the "on" image.
When you set up your <IMG> tag, add the NAME attribute and set it equal to the name of the regular image, minus the extension. For example, the NAME of the BOOKS image, above, is "books".

Now you need to adjust your <A> tag. Specifically, my JavaScript has two functions—named imageOn and imageOff—that serve as general purpose routines for turning any of your images on and off according to the mouse position. Here's the JavaScript:

<SCRIPT LANGUAGE = "JavaScript">
<!--
    
function imageOn(imageName) {
    if (document.images) {
        currentImage = document.images[imageName];
        currentImage.src = imageName + "-on.gif";
    }
}

function imageOff(imageName) {
    if (document.images) {
        currentImage = document.images[imageName]
        currentImage.src = imageName + ".gif";
    }
}

//-->
</SCRIPT>

To use these functions, copy everything between and including the <SCRIPT> and </SCRIPT> tags and insert it on your page between the </HEAD> and <BODY> tags. Note, too, that if you're using JPEG images, you'll need to change the two .gif references to .jpg.

Now, in the <A> tag, you must call the imageOn function in the onMouseover event and the imageOff function in the onMouseout event. In each case, you send the name of the image to the function. Here's the BOOKS example:

<A HREF="/Books/" 
   onMouseover="imageOn('books')" 
   onMouseout="imageOff('books')">
<IMG SRC="books.gif" NAME="books"></A>