MACROMEDIA FIREWORKS 2, Use Manual

Page: 121 / 156

Web Design Features 121
The Down state
The Down state of a rollover button depicts the button's
state on the destination web page. For example, the
Down state is commonly used to show which button
was clicked to view the current web page.
If you choose Simple Rollover, and include the Down
state (Frame 3), Fireworks exports the JavaScript
necessary to make buttons appear in their correct state
(Down, Up, and so on) when placed either in a browser
frame or within multiple HTML documents.
Using bevel effects to draw button states
Any object may be used to create a rollover state.
However, because buttons are the most common type of
JavaScript rollovers, Fireworks includes Live Effect
presets to simplify the creation of common button
appearances. Apply an Inner Bevel or Outer Bevel effect
to an object, and then choose Raised, Highlighted, Inset,
or Inverted from the Button Presets pop-up on the
Effect panel.
Assigning URL links to rollovers
To assign a URL link to a rollover, select the hotspot
object or slice object, and then choose or enter a URL in
the URL link pop-up on the Object inspector.
Swapping parts of the image
When creating rollovers, use slice objects to define the
parts of the image that will swap out. When the rollover
is activated in a browser, the area specified by a slice
object is swapped with either images from another frame
in the Fireworks source file or with an external file.
To target a specific part of the image to swap out
when a rollover is activated:
1
Draw a slice object over the target area.
The target area is the area that changes appearance
when the rollover is triggered.
2
Draw a hotspot object or slice object over the
event area.
The event area is the area that triggers the rollover
when the specified mouse event occurs.
3
Select the event area object and choose Swap
Image from the Add Behavior pop-up on the
Behaviors inspector.
4
In the Swap Image dialog box, choose a slice for
the target area.
The Target list displays all of the slice objects in the
document by their currently assigned name. The
slice preview displays how the document is sliced.
Click a slice or a name of a slice to choose the slice
for the target area.
Button Presets effect Description
Raised The bevel appears
raised up from the
underlying objects.
Highlighted The button’s colors
lighten.
Inset The bevel appears
sunken into the
underlying objects.
Inverted The bevel appears
sunken into the
underlying objects and
the colors lighten.