advertisement -- please support sponsors

gadgets, images:
rollover images

How can I create images which change when the mouse passes over them?

Do you mean something like this? (Move your mouse cursor over the arrow buttons but please do not click on them.)
To produce the effect shown in the example above, you must be able to do two things:
  1. process mouse events for images
  2. change an image after it has already been loaded
This article will show you how to solve both of these problems.

mouse event handlers for images

Obviously, changing graphics as the mouse flies over them is a job for event handlers. To temporarily change an image when the mouse passes over it, and then to change it back when the mouse leaves, you need to process onMouseOver and onMouseOut events for the image. The following code shows many people's first attempts at this task:
<img src="image.gif" onMouseOver="highlight_the_image ();" onMouseOut="unhighlight_the_image ();" >
Unfortunately, this doesn't work because image objects do not support onMouseOver and onMouseOut events.

Fortunately, this deficiency is easy to work around. Another kind of object, the hyperlink object, does support the onMouseOver and onMouseOut events. Thus, in order to detect whether the cursor is over an image, we can simply turn the image into a hyperlink and process the hyperlink's mouse events, as shown in the following example:

<a href="linked_page.html" onMouseOver="highlight_the_image ();" onMouseOut="unhighlight_the_image ();" > <img src="image.gif"> </a>
Now that we know how to program mouse event handlers for images, let's move on to the next step: changing the image.

changing an image after the document has been loaded

This is actually quite simple. All image objects have a property called src which contains the URL of the image being displayed. To change the image, simply assign a new image URL to the image object's src property.

The document object contains an array property called images which can be used to access every image in the document. You can index the array either by an integer or by the image's name (if it has one). For example, suppose we used the following HTML document to display images of three fruits:

<html> <body> <img src="banana.gif" name="banana"> <img src="apple.gif" name="apple" > <img src="orange.gif" name="orange"> </body> </html>
After the document has loaded, we can use either of the following two JavaScript statements to change the orange into an apple:
  1. document . images [2] . src = "apple.gif";
  2. document . images ["orange"] . src = "apple.gif";
The first approach uses the number 2 as an index into the document . images array because the orange image is the third image in the document (remember, array indices begin with 0, not 1).

The second approach uses the image's name, "orange", as an index into the document . images array. This is a better solution because image names do not change when new images are inserted at the beginning of the document, but numerical indices do.

putting it all together

Let's combine all of this knowledge into a simple example. Suppose we would like to display two push-buttons, an arrow pointing left and an arrow pointing right, which take on the appearance of being "pushed" when the mouse passes over them. (Just like the example shown at the beginning of this article.) Additionally, we would like to hyperlink the buttons to documents left.html and right.html so that they are loaded when their respective buttons are pushed.

The normal and "pushed" images, along with their filenames, are shown below:

left right
normal
ol.gif
or.gif
pushed
il.gif
ir.gif
(The letters o, i, l, and r indicate out, in, left, and right, respectively.)
The following HTML/JavaScript code uses the techniques discussed in this article to implement the scenario described above. Study this code carefully!
<html> <body> <a href="left.html" onMouseOver="document . images ['left'] . src = 'il.gif';" onMouseOut ="document . images ['left'] . src = 'ol.gif';"> <img name="left" src="ol.gif" border=0> </a> <a href="right.html" onMouseOver="document . images ['right'] . src = 'ir.gif';" onMouseOut ="document . images ['right'] . src = 'or.gif';"> <img name="right" src="or.gif" border=0> </a> </body> </html>

the rest of the story

I have intentionally tried to keep this tutorial simple. However, there is much more to say about changing images on the fly. If you are going to include images in your document that change in response to user activity, please consider the fact that it takes time for new images to be loaded from your server. Because of this, users with slow Internet connections might witness significant delays between user events and the display of the new images.

There are at least two ways to eliminate this delay through image pre-caching, but I will not discuss them here because they go beyond the scope of this tutorial. (If I get enough requests for it, I will produce another tutorial to demonstrate these techniques.)

Charlton Rose
31 Dec. 1996