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 1 (next page) gives you the bare-bones rollover; the whole thing is done within a standard image link. First a blue arrow is loaded (Figure 1), then it is overwritten by a red arrow when the user moves the mouse over the image (Figure 2). The blue arrow is redrawn when the user moves the mouse away.

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

Figure 2  When the mouse is over the image, the script replaces the first image with the second image.