Create a simple rollover in Fireworks CS4

A simple rollover swaps in the state directly under the top state and involves only one slice.
Creating and attaching a simple rollover

1. Ensure that the trigger object is not on a shared layer.

2. Select Edit > Insert > Rectangular Slice or Polygon Slice to create a slice on top of the trigger object.

3. Create a new state in the States panel by clicking the New/Duplicate State button.

4. Create, paste, or import an image to use as the swap image on the new state. Position the image beneath the slice you created in step 2. Although you are in state 2, the slice is visible.

5. Select State 1 in the States panel to return to the state that has the original image.

6. Select the slice and place the pointer over the behavior handle.

Selecting the behavior handle on a slice

Note: You can select the slice while in any state.

7. Click the behavior handle and select Add Simple Rollover Behavior from the menu.

8. Click the Preview tab and test the simple rollover, or press F12 to preview it in a browser.

Any suggestions, ideas? Feel free to comment on this article!

Back to Top

Comments 3

  1. Pingback: Jayson Conner

  2. Pingback: Jayson Conner

  3. Mark Evans

    Good info but this is something that is better handled via CSS and sprites. You don’t want to have your rollover/hover states dependent on java script and this could unnecessarily bloat the code.

Leave a Reply