Web Page w/ MFW > Create a Drag N Drop Roll Over - Lesson -03

Now that you’ve sliced your document, you’re ready to add interactivity. You’ll use two of the slices you inserted in the previous step to create a drag-and-drop rollover. There are two kinds of drag-and-drop rollovers: simple rollovers and disjoint rollovers. A simple rollover displays a different image when the pointer moves over it in a web browser. A disjoint rollover causes another image to change in a different part of the screen when the pointer moves over it. You’ll create a disjoint rollover here.

1. Select the slice covering the Vintage image. The round icon in the center of the slice is called a behavior handle. It allows you to add behaviors, or interactivity, to a slice. If you are familiar with behaviors in Macromedia Dreamweaver, you’ll recognize many of the same behaviors in Fireworks. Behaviors can also be applied using the Behaviors panel. But for simple interactivity like rollovers, it’s faster and easier to apply a behavior using the slice’s behavior handle.
2. Drag the behavior handle onto the Great Weekend Rates slice, and release the mouse button. A blue behavior line extends from the behavior handle to the corner of the slice, and the Swap Image dialog box appears.
3. Ensure that Frame 2 is selected in the Swap Image From pop-up menu, and click OK. When the pointer moves over the Vintage slice in a browser, an image in Frame 2 replaces the Great Weekend Rates graphic. The Vintage image is considered the trigger for the rollover effect, and the image that replaces the Great Weekend Rates graphic is considered the swap image.
4. If the Frames panel is minimized or isn’t visible, click the expander arrow for the Frames and History panel group and click the Frames tab, or choose Window > Frames. The Frames panel lists the frames available in the current document. Currently there is only one frame in the document. The Frames panel is typically used for animation. In the case of rollovers, it is used to hold swap images.
5. Click the New/Duplicate Frame button at the bottom of the panel. A new frame, named Frame 2, is created in the Frames panel. The workspace is now empty except for the slices you inserted. No objects are listed in the Layers panel, except the contents of the Web Layer. That’s because layers in Fireworks are not shared across all frames by default, with the exception of the Web Layer, which is always shared. Objects on the Web Layer appear in every frame of the document, so any changes you make to web objects, such as slices, affect all frames.
6. Choose File > Import and browse to the Tutorial2/Assets folder. Select the file named rates.gif and click Open.
7. Place the insertion pointer over the slice where the Great Weekend Rates graphic was located in Frame 1. Align the pointer as best you can with the upper left corner of the slice.
8. Click to insert the graphic. The Vintage Classic Rates graphic appears.
9. Click the Preview button at the top of the Document window, and hide the slices in the document by clicking the Hide Slices and Hotspots button in the Web section of the Tools panel. Move the pointer over the Vintage image. The Great Weekend Rates image changes when the pointer rolls over the Vintage image.
   
   Tip:
   If the image seems to jump a bit or the transition between graphics doesn’t look smooth, adjust the position of the swap image in Frame 2 while in Original view. For precise positioning, turn on Onion Skinning in the Frames panel or verify that the x and y coordinates of the Vintage Classic Rates image are the same as those of the Great Weekend Rates image in the Property inspector. When you are finished, return to Frame 1 and turn off Onion Skinning if necessary. For more about these options, refer to the index of Using Fireworks or search Fireworks Help.
   
10. When you are finished, click the Original button at the top of the Document window to return to normal view, and turn slices back on by clicking the Show Slices and Hotspots button in the Tools panel.

You have successfully created a disjoint rollover. Simple rollovers are created in a similar manner: when dragging a slice’s behavior handle as you did in step 2, you simply drag it back onto the same slice.

Generally, web designers add a rollover effect to an image to provide users with a visual cue that the graphic is clickable. If the Global website was an actual site on the Internet, you’d probably want the Vintage and Rates images to link to other pages that provide more information. For the purposes of this tutorial, you’ll leave the disjoint rollover as it is. You’ll get plenty of practice attaching links to other web objects in the following section.