Web Design in a Nutshell

Interactive Buttons with JavaScript

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.

Rollovers are created by placing a JavaScript in the HTML file with instructions displaying different versions of a graphic based on the position of the mouse. For instance, when the mouse pointer is over graphic “X,” the JavaScript runs a function to display the glowing version of the graphic (“glowing X”). JavaScript is discussed further in the next chapter, Chapter 22.

There are many variations on the JavaScript used for creating simple rollovers. The following were written by Nick Heinle, author of Designing with JavaScript (O’Reilly & Associates, Inc., 1997) and creator of WebCoder.com (http://www.webcoder.com), both excellent resources for learning JavaScript.

Simple Rollovers

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