Section 5.5. Rollover Images

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

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 purposein 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 pictureit'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, you don't need to be a programmer to take advantage of this exciting technology. Dreamweaver's many prewritten JavaScript programs, called behaviors , let you add rollover images and other interactivity to your pages. (You can find more about behaviors in Chapter 11.)

To insert a rollover image, start by using a graphics program to prepare the "before" and "after" button images. Unless you're going for a bizarre distortion effect, both images should be exactly the same size . Store them somewhere in your Web site folder.

Then, in the document window, click where you want to insert the rollover image. Frequently, you'll use a table to lay out your rollover buttons (Chapter 7), and insert one or more buttons within a table cell . If you're using CSS to lay out your pages, as described in Chapter 8, you can place the buttons inside a <div> tag, as described in the CSS layout tutorial on Section 8.9.

Choose Insert Interactive Images Rollover Image (or click the Rollover Image button on the Common tab of the Insert bar). Either way, the Insert Rollover Image dialog box appears (see Figure 5-15). Fill in the blanks like this:

• Image name . Type a name for the graphic, if you like. JavaScript requires some name for the rollover effect. If you leave this blank, Dreamweaver gives the image an unimaginative namefor example, Image2when you insert a rollover. However, if you plan to later add additional interactive effects (Chapter 11), you may want to change it to something more descriptive, to make it easier to identify the graphic.

  Figure 5-15. This box lets you specify the name, link, and image files to use for the rollover effect. "Preload rollover image" forces the browser to download the rollover image file along with the rest of the page, avoiding a delay when the mouse moves over the rollover image.

  

• Original image . When you click the top Browse button, a dialog box appears prompting you to choose the graphic you want to use as the "before" button the one that first appears when the Web page loads. (See Section 5.1 for more on choosing graphics.)

• Rollover image . When you click the second Browse button, Dreamweaver prompts you to choose the "after" graphic imagethe one that appears when your visitor's mouse rolls over the first one.

• Alternate text . You can give a text description for a rollover button just as you would for any graphic, as described on Section 5.2.1.

• When clicked, go to URL . Rollover images are most commonly used for navigation elements that, when clicked, take the surfer to another Web page. In this box, you specify what happens when your visitor actually falls for the animated bait and clicks the rollover button. Click the Browse button to select a Web page from your site (see Section 4.1.5) or, if you wish to link to another Web site, type an absolute URL (see Section 4.2.3) beginning with http:// .

When you click OK, you return to your document window, where only the "before" button image appears. You can select it and modify it just as you would any image. In fact, it's just a regular image with a link and a Dreamweaver behavior attached.

To see your rollover in action, preview it in a Web browser by pressing the F12 key (Option-F12 on a Mac) or using the File Preview in Browser command.

---

Note: Attention Windows XP owners : If you have Service Pack 2 (Microsoft's operating system update that attempts to fix, among other things, the many security holes that exist in Internet Explorer), you'll have trouble previewing your rollover images. If, when previewing your page, you see a yellow banner with the ominous statement that begins "To help protect your security," you've got Service Pack 2 installed. Fortunately, this glitch affects only pages viewed locallyoff of your hard driveand won't affect any of the thousands of visitors who come to your live site on the Internet. But if this still drives you crazy, Dreamweaver 8 provides a simple solution: choose Commands Insert Mark of the Web. Selecting this adds a little code to your page, which stops Internet Explorer from butting into your rollover business.

---