How to Make a Rollover Button in Fireworks CS5 - dummies

By Jennifer Smith, Christopher Smith, Fred Gerantabee

You can create interactive buttons in Adobe Fireworks Creative Suite 5 to make a rollover button — a button that changes when a mouse pointer passes over it.

Create the basic art

First, you need to create the basic art for the button. (For this example, the button is a rounded rectangle, but you can substitute another shape.) Follow these steps:

  1. Click and hold the Rectangle tool in the Vector section of the Tools panel and then select Rounded Rectangle from the list of hidden tools.

  2. Click and drag in the workspace to create a shape.

    Any size is fine for this example.

  3. Choose Window→Styles to open the Styles panel.

  4. Choose a style from the drop-down list.

    For instance, select Plastic Styles.

    This basic button is what the viewer initially sees on your web page.


Add rollover behavior

To add rollover behavior to the button and create the version of the button artwork that viewers will see when their mouse pointers pass over it, follow these steps:

  1. Select the rounded rectangle shape you created in the preceding section and then right-click to select Insert Rectangular Slice.

    The shape is highlighted, indicating that a hotspot has been created.


  2. Right-click (Windows) or Control-click (Mac) the center of the slice and choose Add Simple Rollover Behavior from the contextual menu.


  3. Choose Window→States to open the States panel.

  4. From the States panel menu, choose Duplicate State.


    The Duplicate State dialog box appears. Keep the settings at the default of State 1 being inserted after the current state.