Dreamweaver CS5: The Missing Manual

Image Maps

As Chapter 5 makes clear, you can easily turn a graphic into a clickable link. You can also add multiple links to a single image.

Suppose your company has offices all over the country and you want to provide an easy way for visitors to locate the nearest one. One approach is to list all the state names and link them to separate pages for each state. But that’s boring! Instead, you could use a map of the United States—a single image—and turn each state’s outline into a hotspot linked to the appropriate page, listing all the offices in that state.

The array of invisible link buttons (called hotspots) responsible for this magic is called an image map. Image maps contain one or more hotspots, each leading somewhere else.

Here’s how to create an image map:

1. Select the graphic you wish to make into an image map.

   The Property inspector displays that image’s properties and, in the lower-left corner, the image map tools (see Figure 6-21, bottom). These tools appear in the lower half of the Property inspector, which you can see only if you have the Property inspector fully expanded, as described on The Property Inspector.

2. In the Property inspector’s Map field, type a name for the map.

   The name should contain only letters and numbers, and can’t begin with a number. If you don’t give the map a name, Dreamweaver automatically assigns it the ingenious name Map. You don’t really need to change the name; your visitors never see it, the browser uses it just to find it. If you create additional ...