O'Reilly logo

Dreamweaver 8: The Missing Manual by David Sawyer McFarland

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Rollover Images

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.

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."

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 11.4.2.3.)

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 by using JavaScript, a programming language that most Web browsers use to add interactivity to Web pages. Fortunately, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required