Attaching behaviors

Using the Behaviors panel, you can attach a behavior to a slice. You can also attach more
than
one behavior.
To attach a behavior to a selected slice using the Behaviors panel:

Click the Add Behavior button in the Behaviors panel.

Select a behavior from the Add Behavior pop-up menu. For an explanation of each
behavior,
see Using the Behaviors panel to add interactivity to slices on page 277.
Editing behaviors
The Behaviors panel also gives you the ability to edit existing behaviors. You can specify the
type
of event (such as clicking) that triggers the behavior.
1
2

Note: You cannot change the event for Simple Rollover and Set Nav Bar Image.

To change the mouse event that activates the behavior:

Select the trigger slice containing the behavior you want to modify.
All behaviors associated with that slice are displayed in the Behaviors panel.
2 Select the behavior you want to edit.
1

Add Behavior
Remove Behavior Button
Slices, Rollovers, and Hotspots 279

Click the arrow beside the event and choose a new event from the pop-up menu:
triggers the behavior when the pointer rolls over the trigger area.
onMouseOut triggers the behavior when the pointer leaves the trigger area.
onClick triggers the behavior when the trigger object is clicked.
onLoad triggers the behavior when the web page is loaded.
Using external image files for rollover states
You can use an image outside of the current Fireworks document as the source image for a
rollover state. You can use GIFs, animated GIFs, JPEGs, or PNGs. When you choose an
external
file as the image source, that file is swapped with the target slice when the rollover is
triggered in a
web browser.
The file must have the same width and height as the slice it is swapping into. If it does not,
the
browser resizes the file to fit within the slice object. Resizing the file may reduce its quality,
especially in the case of an animated GIF.
3

onMouseOver

To choose an external image file as the source for a rollover state:

While in the Swap Image, Nav Bar Over, or Nav Bar Down dialog box, choose Image File
and
click the folder icon.
1

Note: If you dont see this option in the Swap Image dialog box, choose More Options and then perform step 1.

Navigate to the file you want to use, and click Open.

If necessary, deselect Preload Images (if the external file is an animated GIF).
Precaching can interrupt the display of animated GIFs as rollover states. To avoid this
problem,
deselect Preload Images when setting up the rollover.
2
3

Note: If you plan to export your document for use on the web, be sure that your external image file is accessible
from the exported Fireworks HTML. Fireworks creates document-relative paths to image files. It is a good idea
to place external files within your local site before using them as rollover states in Fireworks. Then when you
upload your files to the web, be sure that the external image file is uploaded as well. For more information on
Fireworks HTML, see Exporting HTML on page 351.

280 Chapter 12

Preparing slices for export

Using the Property inspector, you can make slices interactive by assigning them URLs and
target
frames. You can also specify alternate text to be displayed in a browser while an image is
loading. In

addition, you can choose an export file format to optimize a selected slice. If the Property
inspector
is minimized, click the expander arrow in the lower right corner to see all slice properties.
Slice properties in the Property inspector
Using the Property inspector or the Layers panel, you can give slices unique names.
Fireworks uses
the name you specify to name the files that are generated from slicing upon export. If you
dont
enter a slice name in the Property inspector or the Layers panel, Fireworks will automatically
name slices for you upon export. You can change the auto-naming convention that Fireworks
uses
through the HTML Setup dialog box.
When you export a sliced Fireworks document, it is exported as an HTML file and a series of
graphic
files. You can define properties for the exported HTML file using the HTML Setup dialog box.
Assigning URLs
A URL, or Uniform Resource Locator, is the address of a specific page or file on the Internet.
When you assign a URL to a slice, users can navigate to that address by clicking the area
defined
by the slice in their web browser.
To assign a URL to a selected slice:

Enter a URL in the Link text box of the Property inspector.

Tip: If you intend to reuse URLs, you can create a URL library in the URL panel and then store URLs in the library.
For more information, see Working with URLs on page 260.

Entering alternate text

Alternate, or alt, text appears on the image placeholder while the image is downloading from
the
web; it also substitutes for graphics that fail to download. In some newer versions of
browsers, the
text also appears next to the pointer as a tooltip.
Entering brief, meaningful alternate text has become increasingly important in web design.
A
growing number of visually impaired people are using screen-reading applications, which
convert
alternate text to a computer-generated voice as the mouse pointer passes over graphics on
a web page.
To specify alt text for a selected slice:

In the Property inspector, type the text in the Alt Text box.