Web Design Garage

Chapter 33. Making Rollover Graphics

Rollover graphics are images that seem to change when the visitor rolls over them with the mouse pointer. This effect is actually something of a magic trick, because the graphic doesn't really change. Instead, there are two separate graphics files, and a JavaScript function pulls the old switcheroo, swapping between the two images depending on the position of the mouse pointer.

GEEKSPEAK A rollover graphic is an image that seems to change when the visitor rolls over it with the mouse pointer.

To create a rollover graphic, then, you need three things:

1. The default image file, or the normal state of the rollover

2. The onMouseOver image file, or the image that appears when the visitor mouses over the rollover

3. A JavaScript ...