Rollover images are among the most common interactive elements on the Web, especially when it comes to creating navigation buttons (see Figure 5-14). You've almost certainly seen rollovers in action, when your mouse moves over a button on some Web page and the image lights up, or glows, or turns into a frog.
Figure 5-14. Rollover graphics appear frequently in navigation bars. Before your cursor touches a rollover button (top), it just sits there blankly. But when your cursor arrives, the button changes appearance (bottom) to indicate that the graphic has a functional purpose—in this case, "I'm a link. Click me."
This simple change in appearance is a powerful way to inform a visitor that the graphic is more than just a pretty picture—it's a button that actually does something. Rollovers are usually used to announce that the image is a link. (Though you can use them for other creative effects, as described on Section 184.108.40.206.)
Behind the scenes, you create a rollover by preparing two different graphics— "before" and "after." One graphic appears when the Web page first loads, and the other appears when your visitor's mouse moves over the first. If the cursor then rolls away without clicking, the original image pops back into place.