Skip Navigation.

Tutorial: Adding behaviors in Fireworks

Along with nifty image-editing software, Fireworks also helps you create rollovers using Javascript. On this page, we will learn to slice an image into pieces for rollovers, add behaviors to those slices, and to add link information to those slices.

Slice your image
A selected slice
A selected slice
Click for enlargement
Before you can make rollovers from your image, you need to slice it into pieces. This will allow you to create the sections that will change when your reader "rolls" the mouse over them. Follow these steps to slice your image.

  1. Make sure you're in "web view" and select the slice tool (below).
    Slice tool
  2. The slice tool makes rectangles like the rectangular shape tool does. Create a rectangular slice around your first rollover area by clicking-and-dragging around it.
  3. A small clock-like handle will appear in the middle of the slice you've made (as shown at right).

Repeat these steps for the other slices. Be sure to select the slice tool again--you will need to select it each time.

See also: Fireworks Rollovers: Slice the image

Add behaviors
Behavior dialog
Behavior dialog
Click for enlargement
Behaviors are special codes that Fireworks assigns to parts of an image to determine how those parts act. In this case, we will assign rollover behavior to our slices. Here are the steps to follow:

  1. Select the first slice you want to alter by using the black arrow tool to click on the slice. When it is selected, a tiny clock will appear in the middle of it (as shown above right).
  2. Move your mouse over the clock in the center of your slice; the mouse icon should turn into a hand. Now click and drag down slightly. A curly line should appear going from the center of the clock to the upper left corner of the slice.
  3. When that line appears, let go of the mouse button. The swap-image dialog will open (shown right). Make sure "frame 2" is selected. Click OK.

Repeat this process for each of your slices. Once you are done, you can click the "Preview" tab at the top of the main image window to see how the rollovers will look.

See also: Fireworks Rollovers: Add simple behavior

Add link information
Object window
Object window
Click for enlargement
The last step in creating a rollover is to add the hyperlink information to your rollover. After all, you want people to be able to go somewhere when they click on your rollover, don't you? Just follow the steps below to add a link to a slice.

  1. Select a slice by clicking on it with the black arrow tool. A clock should appear in the middle of the slice (as shown in top right).
  2. Find the "object" panel (at right). It shares a panel with the optimize panel. If you can't find it, follow this progression to open or foreground it:
    Window Object
  3. Click in the "URL" text box and type the URL for the web page you want to link to. This can be a relative or absolute URL.

Now use the black arrow tool to select another slice. Set the link information for each slice you have.

Previous
Next
Tutorial