Dreamweaver MX: The Missing Manual

Rollover Images

Rollover images are among the most common user-interface elements on the Web, especially when it comes to navigation buttons. 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.

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 show that the image is a link (see Figure 5-12).

Figure 5-12. Rollover graphics appear frequently in navigation bars, like the one shown at top. As your cursor touches a rollover button (top), the button changes appearance (bottom) to indicate that the graphic has a functional purpose—in this case, “I’m a link. Click me.”

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.

This dynamic effect is achieved with the use of JavaScript, a programming language that most Web browsers use to add interactivity to Web pages. Fortunately, you don’t need to be a programmer to take advantage of this exciting technology. Dreamweaver’s many prewritten JavaScript ...