TechNote

How to create a disjointed rollover button in Fireworks

Rollover buttons

Adding a rollover button to a web page adds interactivity and clues to help the user navigate throughout the site's pages. The simple rollover button would allow the functionality of an image starting with an original state (for example: a red circle) and when the user rolls the mouse over the button it swaps for an alternate image state (a blue circle). The original image source is "swapped" for a different image source, replacing the original in the same location. Because the image graphically changes, the button can be an indication to the user that if they click on the button, they may trigger another event, perhaps the button links to a new page or a sound will play. The rollover button graphically gives the user feedback to continue interactivity.

Simple rollover example

In the following example when the mouse rolls over the red button it changes from red to blue. The red button image is swapped for the blue button.

Click here to see an example of a simple rollover

For information on how to create a simple rollover in Fireworks versions earlier than MX, select Fireworks Help from the Help menu. Search for the words rollovers, JavaScript.

To create a simple rollover in Fireworks MX, search for Creating Rollovers from the Fireworks Help.

Disjointed rollover buttons

A "disjointed" rollover works differently. When a user rolls over a button (the red circle) another element somewhere on the page changes. For instance, the red circle could remain the same, but to the right of the red circle, another graphic could appear. This new graphic might be text that would indicate what would happen if the button were clicked, or it might be simply for generating dynamic content. In another design approach, the red circle itself could also swap to an alternate image at the same time as the disjointed file changes.

In the following example when the mouse rolls over the red button the rollover starburst appears to the right. The rollover action on the red button prompted an event with the second image.

Click here to see a sample of a disjointed rollover

Instructions for creating a disjointed rollover

To create a disjointed rollover in Fireworks MX, follow the steps below:

Launch Fireworks and choose File > New. Select the size of the canvas and the canvas color, then click OK. (These selections can be modified later, if necessary, by choosing Modify > Document > Canvas Size or Canvas Color).
Using the drawing tools in the toolbar, create the original state of the button. The original state refers to how the button will look when the page first loads, prior to a mouse rolling over it.

At this point, a design decision should be made to determine whether the disjointed rollover will affect a portion of the original image or a separate image file entirely.

If you choose to incorporate the disjointed image into the original image being created, keep in mind that each portion of the image (the area the mouse rolls over and the area that changes when the mouse rolls over) must be in separate slices.

Note: Hotspots can receive mouse events but cannot perform a related rollover or swap image action. Only slices can receive JavaScript actions and perform them.
When the original state of the graphic is completed, open the Frames Palette by choosing Frames from the Window menu. Click on the options menu in the upper right hand corner, and select Duplicate Frame. A dialog box appears with a pop-up menu that allows selection of the number of frames you would like to duplicate.

To create a disjointed rollover like the example above, select 1. Use the default choice of After Current Frame and click OK

Note: To create a more complex button with a down state and an over down state choose 3 from the number pop-up menu.
Back in the Frames Palette, the newly created frame(s) now appear. Click on Frame 2 to select it, and use the tools to graphically change it's appearance. The image as it appears in frame number 2 will display when the mouse rolls over an area.

If you wish the button to have all four states (up, over, click and down), select frames 3 and 4 one at a time in the frames panel, and make changes to the graphic of each frame. Frame 2 will be the state of the button when the mouse rolls over it, Frame 3 will be the state of the button when the button has been clicked on and Frame 4 will be the state of the button while the mouse is currently over the clicked button.
Select the slice tool from the bottom of the toolbar. Draw slices to separate the regions of the area into different images that will ultimately appear in separate table cells.

Note: If the disjointed image is integrated into this graphic, make sure that the area that swaps when the mouse rolls over is in a separate slice from the area where the mouse will rollover the graphic to cause the event.

If the shape of the button that the mouse will rollover is not geometric, the hotspot tool can be used instead to encircle an organic shape. Click on the hotspot or slice that you wish to be the "event receiver."

In the above example, the slice encircling the round button is the area that will receive the mouse events and cause a graphic change elsewhere.
Next select Window > Behaviors. In the Behavior panel, click on the + button and choose Swap Image from the pop-up menu.
The Swap Image dialog box allows you to select the image that will change when the mouse is over the slice selected in step 5.

If the disjointed image is part of the existing graphic, choose the slice from the list in the box "Swap Image in Slice" or click on the slice area to be swapped in the slice preview to the right of the list. Then click on the radio button next to Frame No., and choose the frame that you wish to display from the pop-up menu.

If the swap image rollover will graphically change an image outside of the current graphic, click on the radio button next to Image File. Then, click on the file folder icon to the right of the field and browse to select the image file.

Keep the box next to Restore Image onMouseOut selected, so that the rollover will revert back to the original state when the user's mouse rolls off the event receiver.

Click OK to close this dialog box.
Select File > Export Preview to bring up the Export Preview dialog. Choose either a GIF or JPEG format and select the appropriate optimization for a good balance between image quality and file size.

Click the Export button to continue.
In the Export dialog, give the html file a name in the File Name field. Then navigate to the folder where you want the HTML file to be saved.

From the Slices pop-up menu, choose Export Slices.

Click on the Save button to export the sliced images and HTML page with table and JavaScript information.
To test the file, open up the HTML file that Fireworks created in a browser. Roll your mouse over the button to see the disjointed rollover in action.

If the rollover needs to be incorporated into an existing HTML page, the JavaScript will need to be copied from the <head> of the Fireworks generated HTML file into the <head> of the existing file, then copy the table into the <body> of the existing file. If the HTML document that Fireworks exported was saved into the same folder as the existing HTML page, the paths will be correct. If you are using Macromedia Dreamweaver as your HTML editor, select Insert > Image Object > Fireworks HTML to automatically insert all the necessary code into the existing file.