This chapter is from the book
This chapter is from the book
This chapter is from the book
Adding the Swap Image Behaviors
To build a working remote rollover in Fireworks, you must attach the Swap Image behavior to either a hotspot or a slice object. In this section, you will attach Swap Image behaviors to hotspots that not only will trigger the tab animation but also will switch out the photograph in the circle area.
-
Open ca_4.png in the Project 6 folder. Ensure that the Web layer's visibility is turned on. Select the first hotspot over the Shop button. Click and drag the target-shaped icon on the hotspot over to the tab_default slice.
-
When the Swap Image dialog box appears, click the More Options button and then click the Folder icon to browse to an external file. Navigate to your Site/ Animations folder and select the shoptab_down.gif animation. Disable the Preload Images and Restore Image onMouseOut options.
-
Click and drag the central Target icon from the same hotspot, but this time drag to the photo slice.
-
In the Swap Image dialog box, again disable the Preload and Restore functions and then select the frame with the correct photo. In this case, the photo you want is on Frame 2.
-
Open ca_5.png. This file already has been prepared for export. Choose File | Export. In the Export window, name the file interface.htm, choose the HTML and Images option, and make sure Export Slices is selected from the pull-down menu. Check the Put Images in Subfolder option.
-
Open the resulting file in a browser to preview your work. Most of the remote rollover functionality is there, but you'll need to go into Dreamweaver for final refinements. Remember that if your rollovers don't work, it's because the paths to the animated GIF files used in ca_5.png might be different than the path structure you have set up on your computer.
Figure 6.15 Choose a saved animated GIF file as the Swap Image source.
){kind=link}
Repeat these steps to set up remote rollover behaviors for the remaining buttons. They are completed for you in the ca_5.png file, although you might need to update the paths to the animated GIF files in each of the swap behaviors (depending on where you placed your animation folder).
NOTE
When you use animation for a rollover, you should always disable the Preload Images option. Preloading caches the image before the page is presented to the user for viewing, resulting in an unpredictable starting frame. If you use preloading, you should try to keep your rollover files as small as possible so that they don't take forever to appear when the user mouses over interactive elements.
Using any instance of the Restore Image onMouseOut function would mean that all of the rollover effects would return to their original image onMouseOut. This would be okay for the photo, but it is not the plan for the tab element. Instead, you want to trigger the tab_up state onMouseOut. Unfortunately, Fireworks will not let you set separate behaviors for MouseOver and MouseOut. It assumes that only one Swap Image behavior is applied per targeted slice. This is a minor drawback that means you will have to complete your page in Dreamweaver, but don't worry—it's really easy!