Creating image maps

An image map is a single image with different hyperlinks assigned to defined regions of the image. Use the Image Map Editor to graphically create and edit client-side image maps.

Client-side image maps store the hyperlink information in the HTML document, not in a separate map file as do server-side image maps. When the user clicks a hotspot in the image, the associated URL is sent directly to the server. This makes client-side image maps faster than server-side image maps because the server does not need to interpret where the user clicked. Client-side image maps are supported by Netscape Navigator 2.0 and later, NCSA Mosaic 2.1 and 3.0, and all versions of Microsoft Internet Explorer.

Dreamweaver does not alter references to server-side image maps in existing documents. You can use both client-side image maps and server-side image maps in the same document. Browsers that support both types of image maps give priority to client-side image maps. To include a server-side image map in a document, you have to write the appropriate HTML code.

To create an image map:

1 Select the image and click the Map button in the Property inspector.
You may need to click the expander arrow in the lower right corner of the Property inspector to see the Map button.
2 Type the name for the map in the Map Name box.
This name appears as the NAME attribute of the MAP tag and as the USEMAP attribute of the IMG tag.
3 Select the circle or square tool and drag over the image to create a hotspot in the shape of a circle or rectangle, or select the polygon tool and define an irregularly shaped hotspot by clicking once for each corner point and twice to close the shape.
4 Type the URL for the hotspot in the Link box or click the folder icon to browse to and select a file.
5 To make the linked document appear somewhere other than the current window or frame, enter a window name in the Target box or choose a frame name from the pop-up menu.
See Creating links.
6 In the Alt box, type alternative text that is displayed for the hotspot in text-only browsers.
Some browsers display this text as a tooltip when the user pauses the mouse over the hotspot.
7 Repeat steps 3 through 6 until you have defined all hotspots; then click OK.