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.


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 ...

Get Web Design Garage now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.