JavaScript and Ajax for the Web: Visual QuickStart Guide, Seventh Edition

Creating Rollovers

The idea behind rollovers is simple. You have two images. The first, or original image, is loaded and displayed along with the rest of the Web page by the user. When the user moves the mouse over the first image, the browser quickly swaps out the first image for the second, or replacement image, giving the illusion of movement or animation.

Script 4.1 gives you the bare-bones rollover; the whole thing is done within a standard image link. First a blue arrow is loaded (Figure 4.1), and then it is overwritten by a red arrow when the user moves the mouse over the image (Figure 4.2). The blue arrow is redrawn when the user moves the mouse away.

Figure 4.1. The first image, before the user moves the mouse over it.

Figure 4.2. ...