Internet, Networking, & Security Web Development How to Create an Image Map With Dreamweaver The benefits and drawbacks of using image maps by Jennifer Kyrnin Freelance Contributor Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML. our editorial process LinkedIn Jennifer Kyrnin Updated on June 22, 2020 Web Development Web Design CSS & HTML SQL Tweet Share Email 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: Make sure you are in Design view, then add the image to your web page and select it. 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. 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. 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. 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. To create another hotspot, you must first select the pointer tool, then select one of the hotspot tools again. 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. 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.