An interactive button, also called a “rollover,” changes when the cursor or pointer is positioned over it. By making a button light up (or otherwise call attention to itself), you provide a stronger visual signal that the area is clickable than with a static flat graphic. Rollovers can also be used to pop up a graphic with additional information about the link. Whether it is because rollovers recreate the feel of CD-ROM interfaces or just because they’re fun, audiences seem to enjoy the effect.
The first step is to create two versions of each button, one in an “on” state, and one in an “off” state. Make sure that they have exactly the same pixel dimensions or one will be resized and distorted. Note also the naming scheme.
Example 21.1 creates a simple image swap ...