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. |
![]() |