Macromedia Fireworks 8: Training from the Source

1.

Select the slice for January. The center marker (the behavior handle) makes it easy to add the interactivity to this button. If you are familiar with Dreamweaver, you'll recognize the icon that appears when you click the slice. In Fireworks, you use this handle to point to the slice over the image you want to swap out when the user rolls over the button.

2.

Drag the behavior handle from the January slice to the slice on the image to create the disjointed rollover.

You'll see a blue line connecting the two slices, and the Swap Image dialog box will appear.

3.

In the Swap Image dialog box, choose the frame that stores the rollover image. For this exercise, the January image is drawn in frame 2, so choose frame 2. Click OK.

4.

Repeat steps 1 through 3 for the slices on the remaining months. As you drag the behavior handles on the slices to the image slice, remember that frame 1 contains the starting image. The month number (1 through 12) corresponds to the frame number plus one. Therefore, January goes in frame 2, February goes in frame 3, and so on.

5.

Save your file, and then click the Preview button to see your rollovers.

Roll over each month and see if the starting image changes to a new image. When you roll over another month, the image swaps to that month's image. When you roll off the months, the image returns to the starting image.

If you have the same image in two months, then you chose the same frame in the Swap Image dialog box. Click the Original tab and redo those months. Just drag the behavior handles as you did originally and choose a new frame number.

Note

When you are previewing your page, you might notice that areas without slices don't appear on the canvas. They aren't missing. Your document hasn't been set to display areas without slices. In the next lesson, you will learn the settings for exporting as HTML. For now, if you want to see the entire page, choose File > HTML Setup and then click the Document Specific tab. Choose Include Areas without Slices. If you are still in preview mode, your page updates and the remaining areas appear. This option is normally selected by default.