How to Create an Image Map With Dreamweaver

This article explains how to create an image map using Dreamweaver. Instructions apply to Adobe Dreamweaver version 20.1.

What Is a Dreamweaver Image Map?

When you add a link tag to an image in Dreamweaver, the entire graphic becomes one hyperlink to a single destination. Image maps, on the other hand, can include multiple links mapped to specific coordinates on the graphic. For example, you could create an image map of the U.S. that takes users to the official website of each state when they click it.

How to Create an Image Map With Dreamweaver

To make an image map using Dreamweaver:

1. Select Design view, add the image to the web page, then select it.

   Read More

   Pros and Cons of Image Maps

   By Jennifer Kyrnin

2. In the Properties panel, go to the Map field and enter a name for the image map.

   If the Properties panel isn't visible, go to Window > Properties.

3. Select one of the three hotspot drawing tools (rectangle, circle, or polygon), then draw a shape to define the area for a link.

   The hotspot drawing tools don't appear in Live view. Design mode must be selected to create image maps.

4. In the Properties window, go to the Link field and enter the URL to which you wish to link.

   Alternatively, select the folder next to the Link field, then choose a file (such as an image or web page) you wish to link.

5. In the Alt field, enter alternative text for the link.

   In the Target drop-down list, choose which window or tab the link will open in.

6. To create another hotspot, select the pointer tool, then select one of the hotspot tools.

7. Create as many hotspots as you want, then review the image map in a browser to make sure it works correctly. Select each link to ensure it goes to the proper resource or web page.

Benefits and Disadvantages of Image Maps

There are pros and cons to using image maps in modern web design. While these can make a web page more interactive, a major drawback is that image maps rely on specific coordinates to work. Responsive web design requires images that scale based on the size of a screen or device, so the links can end up in the wrong place when the image changes size. This is why image maps are rarely used on websites today.

Image maps can take a long time to load. Too many image maps on a single page can create a bottleneck that impacts site performance. Small details may be obscured in an image map, limiting their usefulness, especially for users with visual impairments.

Image maps can be helpful when you want to put together a quick demo. For example, if you mock up a design for an app, use image maps to create hotspots to simulate interactivity with app. This is easier to do than it would be to code the app or build a dummy web page with HTML and CSS.