7/24/2019 Slices, Rollovers, And Hotspots

1/2

Slices, Rollovers, and HotspotsSlices are the basic building blocks for creating interactivity in Macromedia Fireworks MX.Slicesare web obects!they e"ist not as images, but ultimately as H#M$ code. %ou can view,select,and rename them through the &eb $ayer in the $ayers panel. #his chapter describes the

conceptsyou need to understand slicing and covers how you can use slices to incorporateinteractivity intoyour web pages.'sing the drag(and(drop rollover method of attaching interactivity to slices, you can )uicklycreate rollover and swap(image e*ects in the workspace. %ou can view the assignedbehaviors inthe +ehaviors panel and create more comple" interactions using this panel.

%ou can also incorporate interactivity into your web pages with hotspots. Hotspots aregenerallyused to create image maps, which are graphics that contain a number of hot areas that linktoother web pages. Hotspots can also receive mouse events, allowing avaScript behaviors to

beacted on in slices.

-reating and editing slicesSlicing cuts up a Fireworks document into smaller pieces and e"ports each piece as aseparate le.'pon e"port, Fireworks also creates an H#M$ le containing table code to reassemble thegraphicin a browser.Slicing cuts a document into multiple pieces, which export as separate fles.Slicing an image has at least three maor advantages/0ptimi1ing 0ne challenge of web graphic design is ensuring that images download )uicklywithout sacricing )uality. Slicing enables you to optimi1e each individual slice using themost

appropriate le format and compression settings. For more information, see 20ptimi1ing and3"porting4 on page 567.688 -hapter 96

:nteractivity%ou can use slices to create areas that respond when the user;s pointer passesover or clicksthem. For information on attaching interactivity to slices, see 2Making slices interactive4 onpage 6

7/24/2019 Slices, Rollovers, And Hotspots

2/2

1 -hoose 3dit = :nsert = Slice. #he slice is a rectangle whose area includes the outermostedges ofthe selected obect.2 :f more than one obect is selected, choose how to apply slice guides/Single creates a single slice obect that covers all selected obects.Multiple creates a slice obect for each selected obect.

#o draw a rectangular slice obect/

1 -hoose the Slice tool.2 >rag to draw the slice obect. #he slice obect and slice guides appear on the &eb $ayer.Note:%ou can adust the position of a slice as you drag to draw it. &hile holding down the mouse button, simplypress 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 68raw a slice obect and leave it selected.2 :n the Aroperty inspector, choose H#M$ from the #ype pop(up menu.3 -lick 3dit.4#ype te"t in the 3dit H#M$ Slice window, and format the te"t if desired by adding H#M$te"t formatting tags.Note: ?lternatively, you can add H#M$ te"t formatting tags to the H#M$ after it has been e"ported using a te"teditor or H#M$ editor.

5 -lick 0B to apply your changes and close the 3dit H#M$ Slice window.#he te"t and H#M$ tags you entered appear in your Fireworks ACD le.Note: H#M$ te"t slices may vary in appearance when viewed in di*erent browsers and on di*erent operatingsystems, because font si1e and type can be set in the browser.