CONTRIBUTOR: Shahjahan Alhassan - 15th Oct 2001

Image rollovers work by changing an image when the mouse moves over it, and back to the original image when the mouse moves off it.

Move your mouse over the button to see this script in action, clicking it will reload this page.

Create two images, one off state image and another on state image.

 Off state (button_off.gif)    On state (button_on.gif)

Give the image a name e.g. button.

Use the following code using the image name you have chosen ('button' has been used in this example).

If you create more than one rollover on a page remember to keep each image name unique else errors will occur.

Source code  [Select all code]

<a href="imagerollovers.htm" onMouseover="document.button.src='images/button_on.gif'" onMouseout="document.button.src='images/button_off.gif'"> <img src="images/button_off.gif" name="button"> </a>