How to Create an Image Map With Dreamweaver

The benefits and drawbacks of using image maps

Image maps aren't as popular as they used to be but are helpful for creating mock-ups of websites and mobile apps. While making an image map with Dreamweaver is not difficult, it helps to have some prior experience with Adobe's web design software.

Instructions in this article 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.

It's also possible to build image maps using only HTML.

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.

    A map of the US in Design view in Adobe Dreamweaver
  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.

    The Name field on the Properties tab
  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.

    The Hostspot tools
  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.

    The Link field
  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.

    The Alt text box
  6. To create another hotspot, select the pointer tool, then select one of the hotspot tools.

    The Pointer tool
  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.

    An image map of the US in Dreamweaver

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.