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 they are still helpful for creating mock-ups of websites and mobile apps. While making an image map with Dreamweaver is not especially 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 big 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 you click on 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. Make sure you are in Design view, then add the image to your web page and select it.

    A map of the US in Design view in Adobe Dreamweaver
  2. In the Properties panel, enter a name for the image map in the Map field.

    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) and draw a shape to define the area for a link.

    The hotspot drawing tools will not appear in Live view. You must be in Design mode to create image maps.

    The Hostspot tools
  4. In the Properties window, enter the URL you wish to link to in the Link field.

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

    The Link field
  5. Enter alternative text for the link in the Alt box.

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

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

    The Pointer tool
  7. Create as many hotspots as you want, then review your 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 they can make a webpage 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 also take a long time to load. Too many image maps on a single page can create a bottleneck that has a massive impact on site performance. Small details may be obscured in an image map, which limits their usefulness, especially for users with visual impairments.

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