Creating Toggle Group Rollovers; Exported Javascript Code - MACROMEDIA FIREWORKS 2-USING FIREWORKS Use Manual

Creating toggle group rollovers

A toggle group is a series of rollovers grouped so that
when one rollover is triggered, the others in the group
are triggered as well. For example, in a group of buttons
used for navigating a site, pressing one button might
cause it to appear sunken while at the same time raising
the previously pressed button.
Using toggle group rollovers also eliminates the graphic
flicker sometimes seen in certain instances of Simple
Rollover or Swap Image rollovers. The flicker happens
when you move the mouse from one rollover area to the
next, and the first rollover's Restore onMouseOut
function is executed before the onMouseOver for the
second rollover is executed. A toggle group rollover
handles the transition between rollover areas smoothly.
To create a toggle group rollover:
Draw each rollover state on its appropriate
1
frame.
Draw a slice object over each rollover area.
2
Assign rollover behaviors to slice objects, as
3
previously described.
Select a slice object, and then choose Toggle
4
Group from the Add Behaviors pop-up on the
Behaviors inspector.
Enter or choose a Group Name for the toggle
5
group to which the slice or hotspot belongs.
All slices in a single toggle group must be assigned
the same name.
If the assigned behavior is Simple Rollover, and
6
Down states or OverDown states have been
assigned to the slices, check Include Down state
or Include OverDown state in the Toggle Group
dialog box, and then click OK.
Repeat steps 4 and 5 for each slice in the toggle.
7
If you want one slice to appear in its Down state
8
when initially viewed, select the slice, double-
click its toggle group behavior on the Behaviors
inspector, and check Make this slice the initial
state.
Choose File > Export, optimize the image in the
9
Export Preview, then click Next.
In the Export dialog box, choose an HTML Style,
10
specify a destination for the images and the
HTML file, and then click Export.

Exported JavaScript code

When JavaScript rollovers are exported, an HTML file
is also exported that includes JavaScript used to display
the rollover in a web browser. The JavaScript exported
from Fireworks includes browser detection, and is
compatible with versions 3 or higher of both Netscape
Navigator and Microsoft Internet Explorer. Some
browsers, such as Internet Explorer 3, cannot display all
four JavaScript rollover states. In that case, the JavaScript
exported by Fireworks allows those browsers to display
the Up state and link to the appropriate URL.
Pre-caching
The JavaScript generated by Fireworks performs pre-
caching of rollover states. This means that when the
HTML file is first loaded into the web browser, all
rollover images, even those not initially visible, are loaded
into the browser' s memory. When the cursor is moved
over a Fireworks JavaScript rollover, the alternative (alt)
state is immediately swapped, instead of waiting for it to
be downloaded from the server.
Pre-caching does not occur when rollover source
consists of an external file. This is to prevent interrupted
play of animated GIFs in browsers when animated GIFs
are used as rollover states.
Customizing HTML and JavaScript output
Customize Fireworks HTML and JavaScript output by
editing the HTML style templates. For more
information on customizing Fireworks HTML, see
"Using Fireworks HTML" on page 130.
Web Design Features 123