Have you ever wanted to define rollovers for organically shaped or overlapping design elements and found it difficult to do using rectangular slices? This lesson demonstrates how to use multiple hotspots to define rollovers for overlapping areas within a single slice object.

Because all rollover animations, including hotspot rollovers, need a target slice in which to appear, the first step in creating any type of rollover is slicing the graphic. The graphic in the example file for this lesson is already sliced. The upper title bar and each date are separate slices and the content area is one large slice.

For a tutorial about slicing graphics, choose Help > Tutorials > Creating Slices from your Fireworks 2 menu bar.

Creating a hotspot from a shape

Creating multiple overlapping hotspots

Assign a simple rollover to a hotspot

Assign a swap rollover to a hotspot

Preview your rollovers and export

Lisa Lopuck Author, teacher, and visual designer, Lisa Lopuck is a well-known expert on user interface design, traveling around the world to speak at web conferences and to teach interactive media seminars. Prior to founding Electravision, her ten-year interactive multimedia career included clients such as the original Apple Multimedia Lab, Voyager, the George Lucas Educational Foundation, KidSoft, Kaleida, United Nations, PowerTV, Sony, Microsoft, Vivid Studios, and Studio Archetype. 5/6/99 rollover, simple rollover, hotspot, overlap hotspot, swap image, slic