Slices, Rollovers, and Hotspots

Slices are the basic building blocks for creating interactivity in Macromedia Fireworks MX.
Slices
are web objectsthey exist not as images, but ultimately as HTML code. You can view,
select,
and rename them through the Web Layer in the Layers panel. This chapter describes the
concepts
you need to understand slicing and covers how you can use slices to incorporate
interactivity into
your web pages.
Using the drag-and-drop rollover method of attaching interactivity to slices, you can quickly
create rollover and swap-image effects in the workspace. You can view the assigned
behaviors in
the Behaviors panel and create more complex interactions using this panel.
You can also incorporate interactivity into your web pages with hotspots. Hotspots are
generally
used to create image maps, which are graphics that contain a number of hot areas that link
to
other web pages. Hotspots can also receive mouse events, allowing JavaScript behaviors to
be
acted on in slices.

Creating and editing slices

Slicing cuts up a Fireworks document into smaller pieces and exports each piece as a
separate file.
Upon export, Fireworks also creates an HTML file containing table code to reassemble the
graphic
in a browser.
Slicing cuts a document into multiple pieces, which export as separate files.
Slicing an image has at least three major advantages:
Optimizing One challenge of web graphic design is ensuring that images download quickly
without sacrificing quality. Slicing enables you to optimize each individual slice using the
most
appropriate file format and compression settings. For more information, see Optimizing and
Exporting on page 325.
266 Chapter 12
Interactivity You

can use slices to create areas that respond when the users pointer passes
over or clicks
them. For information on attaching interactivity to slices, see Making slices interactive on
page 273.
Updating parts of a web page Slicing allows you to easily update parts of a web page that change
frequently. For example, your companys web page might have an employee-of-the-month
section
that changes monthly. Slicing enables you to quickly change just the employees name and
photo
without replacing the entire page.
Creating slice objects
You can create a slice object by drawing it with the Slice tool or by inserting a slice based on
a
selected object.
The lines extending from the slice object are slice guides, which determine the boundaries of
the
separate image files into which the document is split on export. These guides are red by
default.
To insert a rectangular slice based on a selected object:

Choose Edit > Insert > Slice. The slice is a rectangle whose area includes the outermost
edges of
the selected object.
2 If more than one object is selected, choose how to apply slice guides:
Single creates a single slice object that covers all selected objects.
Multiple creates a slice object for each selected object.
1

To draw a rectangular slice object:

1
2

Choose the Slice tool.

Drag to draw the slice object. The slice object and slice guides appear on the Web Layer.

Note: You can adjust the position of a slice as you drag to draw it. While holding down the mouse button, simply
press and hold down the Spacebar on the keyboard, then drag the slice to another location on the canvas.
Release the Spacebar to continue drawing the slice.

Slices, Rollovers, and Hotspots 267

Creating HTML slices

An HTML slice designates an area of a sliced image where ordinary HTML text appears in the
browser. An HTML slice does not export any pixel image data; it exports HTML text that
appears in the table cell defined by the slice.
HTML slices are useful if you want to quickly update text that appears on your website
without
having to create new graphics.
To create an HTML slice:

Draw a slice object and leave it selected.

In the Property inspector, choose HTML from the Type pop-up menu.
Click Edit.
Type text in the Edit HTML Slice window, and format the text if desired by adding HTML
text formatting tags.
1
2
3
4

Note: Alternatively, you can add HTML text formatting tags to the HTML after it has been exported using a text
editor or HTML editor.

Click OK to apply your changes and close the Edit HTML Slice window.
The text and HTML tags you entered appear in your Fireworks PNG file.
5

Note: HTML text slices may vary in appearance when viewed in different browsers and on different operating
systems, because font size and type can be set in the browser.