MACROMEDIA FIREWORKS 2, Use Manual

Page: 120 / 156

Chapter 4 120
JavaScript rollovers
JavaScript rollovers are images that change appearance
in a web browser when you move the mouse over them
or click them. JavaScript rollovers are created by drawing
different rollover states, and then using JavaScript
within an HTML file to switch to a different image for
certain events, such as moving the mouse over the image
or clicking the image.
To create a JavaScript rollover:
1
Draw each rollover state on a separate frame,
with each state positioned at the same location
on each frame.
2
Draw slice objects or hotspot objects to define
event areas.
An event area is the area used to trigger a rollover.
3
Select each event area, and then choose a
rollover behavior from the Add Behaviors pop-up
on the Behaviors inspector.
4
Choose File > Export, optimize the image in the
Export Preview, then click Next.
5
In the Export dialog box, choose an HTML output
format, specify a destination for the images and
the HTML file, and then click Export or Save.
When exporting rollovers, Fireworks automatically
generates the JavaScript necessary to display the
rollovers in a web browser and exports that JavaScript in
an HTML file. View this HTML file in a web browser
to preview the JavaScript rollover.
Button rollovers
A common use of JavaScript rollovers is to create
buttons that change appearance when the cursor is
moved over them in a web browser. Each appearance, or
state, of a button is a different image. Four states can be
used when creating a button: Up, Over, Down, and
OverDown. Each state is drawn on a different frame
using frames one through four.
The following table describes the buttons states and on
which frame to draw them.
To create a JavaScript rollover button:
1
Draw each button state on its appropriate frame.
2
Draw a slice object over the button.
3
Select the button's slice object, and then choose
Simple Rollover from the Add Behaviors pop-up
on the Behaviors inspector.
4
If the button has a Down state or an OverDown
state, check Include Down state or Include
OverDown state in the Simple Rollover dialog
box, and then click OK.
5
Choose File > Export, optimize the image in the
Export Preview, then click Next.
6
In the Export dialog box, choose an HTML output
format, specify a destination for the images and
the HTML file, and then click Export.
State Description Location
Up Default button appearance. Frame1
Over Button appearance when the
cursor moves over it. Frame 2
Down Button appearance on its
destination page.
See “The Down state” for
more information. Frame 3
OverDown Button appearance as it is
clicked. Or, when creating a
toggle-group rollover,
OverDown is the appearance
of a Down state when the
cursor is moved over it.
Frame 4