Web Design in a Nutshell, 3rd Edition

Creating the map

Regardless of the tool you’re using, and regardless of the type of image map you’re creating, the process for creating the map information is basically the same. Read the documentation for your image map tool to learn about features not listed here.

1. Open the image in an image map program.

2. Define areas within the image that should be clickable by using the appropriate shape tools: rectangle, circle, or polygon (for tracing irregular shapes).

3. While the outline of the area is still highlighted, enter a URL for that area in the text entry field provided, as shown in Figure 12-8.

4. Continue adding shapes and their respective URLs for each clickable area in the image.

5. For server-side image maps , you also need to define a default URL, which is the page that displays if users click outside a defined area. Many tools have a prominent field for entering the default URL, but on others, you may need to look for it under a pull-down menu.

6. Select the type of image map (client- or server-side) you want to create. Note that server-side image maps are strongly discouraged.

7. Save or export the map information. Server-side image maps are saved in a map definition file (.map) that resides on the server. For client-side image maps, you may need to copy and paste the resulting map code into your HTML file.

Figure 12-8. Creating map information (shown in Dreamweaver MX)

If you do not have an image ...