Add JavaScript to Fireworks

Advanced Image Swapping

An Advanced version of the Simple Rollover Behavior is the "Swap Image Behavior". Essentially, the Swap Image Behavior accomplishes the same end result as the Simple Rollover – that is, when an image is selected by the cursor it's replaced by another image. The strength of Swap Image is that it allows you to swap multiple images at once. For instance, the buttons used for the GrarageSale.com navigation have a Simple Rollover applied to them. In addition, as the cursor rolls over each button, the text in the center of the site changes. The Swap Image Behavior makes this poosible.

Select a button and apply the Swap Image Behavior. A Swap Image Behavior, as shown in figure 10, has a number of enhanced features.


Figure 10. The Swap Image affords the designer great control over which images are changed.

The Swap Image window, which appears along the top half of the window, shows the name and the location of the image on the canvas. The name in the left hand column can be changed in the Object Inspector. Alternatively, you can select the image that is to be changed from the right hand view of the canvas.

All the Sliced regions of the graphic appear in the right hand frame. Select the text in the center of the canvas. Now we have to replace the image in this slice with another image. To do this, simply choose a frame number. The effect is the same as a Simple Rollover, with the exception that you can select any frame to replace the current frame. For instance, each button can have the same behavior associated with it, and the text in the center of the canvas can be changed to a different frame number with different text.

Exporting For the Web

For all of this to work correctly, you'll need to export the file in a Web format. Fireworks adjusts the file format to HTML when you select File, Export. Figure 11 demonstrates how this works.


Figure 11. The Save Type is HTML and Images.

The file type must be selected as HTML and Images with Slices set to "Export Slices". The exported file will be comprised of a number of graphic files and a Web page, which can now be sent to your Website. And the Behaviors you added in Fireworks can be modified in Dreamweaver.

With Fireworks you can now deliver Web pages that leave customers saying "Wow! That’s PIZAZZ!"