| < Day Day Up > |
|
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. |
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:
Place your cursor into your existing Dreamweaver page at the point where the buttons should be located.
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.
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:
Select the graphic to edit.
Open the Behaviors panel and double-click the attached 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.
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.
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
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.
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. |
Click OK to set the rollover. Repeat Steps 2–5 for each button, selecting the appropriate over state from the mainnavs folder.
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.
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.
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.
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.
| < Day Day Up > |
|