Fireworks: Image Maps

Image maps are graphics that contain hyperlinks. They differ from hyperlinked images in that different sections of the image maps correspond to different links. Fireworks has tools that make making image maps very easy. Below is a step-by-step walkthrough for making image maps.

make sure your image is in Show Slices mode.
The two small boxes in the "view" section of the Fireworks toolbar turn its slices on and off. When slices are on, the small green/red button on the right is selected, and the image shows turquoise boxes over each hot spot (We'll tell you how to make hot spots in a moment). When slices are hidden, the view choice on the left is selected and the hot spots are not visible.
Select hotspots using the hotspot tool.
The Hotspot tool (the turquoise one on the left) allows you to select a rectangular area, a circular area, or a polygonal area. To select an area, click the hotspot tool (or click-and-hold it to choose from several options) and cover part of the image with the resulting turquoise shape.
Add a URL to the hotspot
Select the hotspot with the pointer tool. Notice that a small clock appears inside and the hotspot object window fills with text boxes. Enter the URL for the link in the box next to the link of chain. Then fill in the "alt" message. To see what an alt message does, hold your mouse over a spot on this image and you will see what the ALT tag for that link or image is. You can also fill in the Target window if you're using frames.
Export the image and code.
To add your image to your web page, you need to export the image and the code. Remember, Image maps are a mix of images and code. If you don't export the code, the image you export will be just that, an image and nothing more. See our Exporting help pages for more information about that.

Below is the image map made with the examples above.
The fireworks and the base of the building are links.

Image from Armadillo's WWW Server, http://www.rice.edu/armadillo/Texas/textbuttons.html

Back