Dreamweaver CS6: The Missing Manual

Image Maps

As Chapter 4 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 want 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 5-21, bottom). (You see these tools only with the Property Inspector fully expanded—double-click the empty grey area to show the full 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, and a browser uses it just to find the file. If you create additional image maps, Dreamweaver calls ...