Example Clickable Image Maps:

Image Map Help Page

California Election Returns

Making an image map in Fireworks follows these general steps:

Building the image map in the Fireworks PNG document

Exporting the graphic and HTML files

Placing the image map HTML in the appropriate place in your Web site or within another HTML file

To establish a source graphic for an image map:

1	Create or import a graphic.
2	Choose Modify > Canvas Size and enter dimensions for the image map.
3	Choose File > Save As to name the Fireworks source document.

The Fireworks PNG file in which you are building the image map is not the image map itself. The exported graphic and HTML files combine to create an image map in a Web browser.

Creating hotspots

After you identify areas on your source graphic that would make good hotspots, you can create the hotspots and then assign URL links to them. You can draw hotspots or create a hotspot by tracing objects.

To draw a rectangular or circular hotspot:

1	Open the source graphic.
2	Choose the Rectangle Hotspot tool or the Circle Hotspot.
3	Drag the Hotspot tool to draw a hotspot over an area of the source graphic. Hold down Alt to draw rectangles or circles from a centerpoint.

 

Assigning URLs to hotspots

A URL, or Universal Resource Locator, is an address of a specific page or file on the Internet. Use the Object inspector to assign URLs to each hotspot.

To assign a URL to a hotspot:

1	Select a hotspot on the Web Layer.
2	Choose Window > Object to open the Object inspector.
3	Enter a URL in the Link text box.
4	Enter an alternative (alt) description, which is text that appears in a Web browser as the image downloads.
5	Choose an alternative hotspot color from the Overlay Color pop-up menu to organize the Web Layer.

To set options for a simple image map:

1	Choose File > HTML Properties. Disregard the Slice Options section.
2	Specify whether the image map is client-side, server-side, or both. Browsers that support both types give priority to client-side image maps.
3	Choose a Background URL for parts of the image not defined by hotspot objects.
4	Enter an alternative image description, which appears when the image is disabled or unavailable.

 

Exporting image maps

After you build the image map in the Fireworks PNG document, you must export the image map before it actually functions as an image map in a Web browser.

Exporting an image map generates a variety of files.

	Exporting a client-side image map generates the graphic file and the HTML file containing map information for hotspots and corresponding URL links.
	Exporting a server-side image map generates the graphic file, a separate map file, and an HTML file containing a link to the map file.

To export an image map:

1	Optimize the graphic to prepare it for export.
2	Choose File > Export to open the dialog box.
3	Navigate to the folder in which to place the graphic file, and name the file.
	If you have already built a local file structure for your Web site, you can save the graphic in the appropriate folder for the site from here. Disregard the Slicing option for now.
4	Choose an HTML Style format.
6	Click Save to export the image map.

You can open the HTML file that Fireworks generates for the image map and copy and paste the image map code into another HTML file.