Image Roll Overs

An image roll over is an image, which when the mouse moves over the image changes the image. The images usually reflect buttons as in the example below:

Here is the source code for the above button:

<a href="#"
onMouseover="document['help_button'].src='help_button_over.gif';"
onMouseout="document['help_button'].src='help_button.gif';"
>
<img SRC="help_button.gif" name="help_button" border=0 height=24 width=130>
</a>

How This Works

First you need two images of the same size. The images must be the same size, otherwise the image that appears during the "rollover" will be distorted. Below are the two images;

The next step is making the image into a link so that the Javascript events onMouseover and onMouseout can be captured. Since a link must have a href, but you don't want it to go anywhere, we direct it to "#" which is the current document. Also since you don't want the button to appear linked, you set the border to 0. The image is also named so that we can refer to it to change it.

The final step is adding the Javascript dealing with the mouse events when the mouse moves over the image and leaves the image.

onMouseover="document['help_button'].src='help_button_over.gif';"
onMouseout="document['help_button'].src='help_button.gif';"

The onMouseover javascript is run when the mouse moves over the image, the onMouseout javascript is run when the mouse leaves the image.
Note: It maybe obvious, but the onMouseout code restores the image to it's original source (appearance). Without doing this, the image would remain with the mouseover image after the user was no longer pointing at the button (image).

Going Somewhere When The Button Is Clicked

This button is not the most useful button as it does not do anything when the user clicks on it. If you want to load another page when the user clicks on the button, simply change the href to point to that page.

For example...

<a href="http://www.ist.uwaterloo.ca"

Changing The Web Page When The User Moves Over The Button

Here is the basic code for the above example.

<a href="#"
onMouseover="document['help_button'].src='help_button_over.gif';document['display_area'].src='Glenn.gif';"
onMouseout="document['help_button'].src='help_button.gif';document['display_area'].src='transparent.gif';"
>
<img SRC="help_button.gif" NAME="help_button" BORDER=0 height=24 width=130>
</a>

There is not much different in this example, except there is a second image being changed, when the button is changed.

Trick: If you look at the transparent gif itself, which is hard because it's transparent, you will see that it is only 1 pixel high and wide. The display_area image size is the size of the image that will be loaded into it. Normally, this would cause a problem as the smaller image will be stretched to fill the larger area. Since the image is transparent, you will not see that distortion.

Using Javascript For More Advanced Things

By using javascript you can do more advanced things when the mouse moves over an image. This is beyond this page's purpose.

Note: It's often better to call a Javascript routine than to put the code directly into the <a> tag once it gets beyond changing the image itself.

Tools To Do Rollovers

You can do rollovers as shown above by hand coding. However, more and more Web authoring tools will generate the necessary coding automatically.