Building Rollover Buttons

---

Rollover is the term used to describe the swapping of one image source (src) for another when the user moves (rolls) the cursor (mouse) over a graphic that has a JavaScript function attached to its link. The swapping occurs onMouseOver, and the second image is known as the Over state of the button. Rollovers are a great way to introduce additional information into a small space. You can even make one or both of your button states from animated GIFs.

Cross-Reference 

See Chapter 22 for information about creating animated GIFs in Fireworks. Chapters 11 and 12 cover animation in FreeHand.

Inserting Fireworks rollovers

 Fireworks MX   Use Insert Fireworks HTML (Insert ® Interactive Images ® Fireworks HTML) to place rollover buttons created in Fireworks into Dreamweaver pages. If you designed your rollover buttons within a complete page design, export only the navigational elements as a separate Web page with graphics for use in Dreamweaver.

Cross-Reference 

Use the Export Area tool in Fireworks MX to build a secondary file with your navigation rollover buttons and export both HTML and Images into your defined Dreamweaver site. See Chapter 23 for details on how to use this method.

To insert the Fireworks HTML rollovers, follow these steps:

1. Place your cursor into your existing Dreamweaver page at the point where the buttons should be located.

2. Click the Insert Fireworks HTML button found in the Common tools of the Insert bar and use the Browse button to locate the exported Fireworks page.

3. Click OK.

Fireworks rollover buttons are written using native Dreamweaver behavior code. To edit the behaviors attached to the buttons in Fireworks, follow these steps:

1. Select the graphic to edit.

2. Open the Behaviors panel and double-click the attached behavior.

Using the Swap Image behavior

Although using the Insert Fireworks HTML button is useful, it is often easier and faster to simply export your graphics from Fireworks and build your rollovers in Dreamweaver using the Swap Image behavior.

On the CD-ROM 

Save the Habitat Alert40 folder from the chapter40_exercise folder to your hard drive. Define a new site. Hint: If you already have another Habitat Alert site defined, then choose the Edit Site option in the Site panel of the Site Definition drop-down menu and change the path to the Local Root folder.

 Habitat Alert site   In the following steps, you use the project site to see how to apply the Swap Image behavior in Dreamweaver.

1. Open the template (basic page.dwt) for the site pages from the Templates folder. This page contains graphics used as buttons, but they do not have any behavior attached.

2. Select the first of the buttons (LEARN). Use the Property inspector to give this graphic a "name" that is used to reference the object in the browser. Name this image btn_learn. Name each of your button graphics using the same convention, starting with btn_ and using the text of the button. Names should be simple and contain no spaces or odd characters. You may use an underscore or hyphen. Names may not start with numbers.

   • btn_learn

   • btn_act

   • btn_support

   • btn_find

3. Reselect the LEARN button and open the Behaviors panel (in the Design panel group). Click Add (+) and select the Swap Image behavior.

   Naming your images is a smart thing to do. The Swap Image dialog box lists all images present in your page. If the images do not have names, they are listed as unnamed <img>, which makes them pretty hard to recognize!

   In the Swap Image dialog box, notice that the btn_learn image is preselected in the list of images. Dreamweaver assumes you are going to swap this image with another. In this case, Dreamweaver is correct.

4. Click the Browse button to locate the over state for the LEARN (btn_learn) button. Navigate to the chapter40_exercise\Habitat Alert40 folder that you saved to your hard drive and to the html\site\sharedimages\mainnavs folder. Select btn_learn_f2.gif and click the OK button.

    Fireworks MX   Fireworks uses two frames to create the two states of a rollover button. Unless you set it otherwise, Fireworks exports the second frame's graphics (the over state of the buttons) appending _f2 to the slice name, as explained in Chapter 23.

   The autocheck Preload Images and Restore Images on MouseOut add two more functions that are almost always required for a typical rollover. The first (Preload Images) ensures that the over states of your buttons are downloaded and in browser cache, ready to be called by user events. The second (Restore Images on MouseOut) function keeps track of the original image and restores it when the user moves away from the button.

   Tip 

   Uncheck the preload function when developing rollovers that use animated GIFs. If your animations preload in the background, the browser may start the animation on the frame that is currently loading rather than from the beginning.

5. Click OK to set the rollover. Repeat Steps 2–5 for each button, selecting the appropriate over state from the mainnavs folder.

6. Save your page. Because this is a template, you are asked to update all pages that use the template. Click Update. Preview the page in a browser to test the rollovers for each button.

Editing a Swap Image behavior

If you make a mistake and select the incorrect graphic or want to change the over state of your graphic, it's easy to edit the behavior and choose a different image. First, select the graphic to edit. In the Behaviors panel, double-click the Swap Image behavior listed for that graphic. Use the Browse button to select the correct graphic.

Rollover links

These buttons have links preset in the exercise files, but it is possible that when you build rollovers you may not have pages to link to. Because a link is required to attach a behavior to an image, Dreamweaver adds a null link to your image when a link is not present.

When you are ready to change the null link to a real path to a page, select the button and use the Point-to-File method to select the target page.

Removing the Swap Image behavior

To remove an attached behavior, first select the object to which the behavior is applied. In the Behaviors panel, highlight the selected behavior and click the Minus (-) button or press Delete to remove it.

---