Tips for Creating an Image Map with Dreamweaver

The benefits and drawbacks to using image maps

Application icon for Adobe Dreamweaver
Taken from Adobe Dreamweaver CS5.app (Original uploaded on en.wikipedia)/Adobe Systems/Public Domain

There was a point in the history of web design where many sites used a feature known as "image maps". This is a list of coordinates attached to a specific image on a page. These coordinates create hyperlink areas on that image, essential adding "hot spots" to a graphic, each of which can be coded to link to different places. This is much different than just adding a link tag to an image, which would cause that entire graphic to become one big link to a single destination.

 

Examples - imagine having a graphic file with an image of the United States. If you wanted each state to be "clickable" so they go to pages about that specific state, you could do this with an image map. Similarly, if you had an image of a music band, you could use an image map to have each individual member be clickable to a subsequent page about that band member. 

Do image maps sound useful? They certainly were, but they have fallen out of favor on today's Web. This is, at least in part, because image maps require specific coordinates to work. Sites today are built to be responsive and images scale based on the size of a screen or device. This means that pre-set coordinates, which is how images maps work, fall apart when a site scales and the images change size. This is why image maps are rarely used on productions sites today, but they do still have advantages for demos or instances where you are forcing the size of a page.

Want to know how to create an image map, specifically how to do so with Dreamweaver? . The process is not especially difficult, but it's not easy either, so you should have some experience before you begin. 

Getting Started

Let's get started. The first step you need to take is to add an image to your web page.

You'll then click on the image to highlight it. From there, you need to go to the properties menu (and click on one of the three hotspot drawing tools: rectangle, circle or polygon. Don't forget to name your image, which you can do in the property bar. You can name it anything you want. Use "map" as an example.

Now, draw the shape you want on your image using one of these tools. If you need rectangular spots, use the rectange. Same for the circle. If you want more complex hotspot shapes, use the polygon. This is what you would likely use in the example of the US map, since the polygon would allow you to drop points and create very complex and irregular shapes on the image

In the properties window for the hotspot, type in or browse to the page to which the hotspot should link. This is what create that linkable area. Continue adding hotspots until your map is complete and all the links you want to add have been added.

Once you are done, rreview your image map in a browser to make sure it works correctly. Click each link to ensure it goes to the proper resource or web page.

Disadvantages of Image Maps

Once again, be aware that image maps have several cons, even outside of the aforementioned lack of support with responsive websites.

Firs, small details may be obscured in an image map. For example, geographical image maps may help to determine which continent a user is from, but these maps may not be detailed enough to pinpoint the user's country of origin. This means an image map may help to determine if a user is from Asia but not from Cambodia in particular. 

Image maps may also load slowly. They shouldn't be used multiple times on a website because they occupy too much space to be used on each page of a web site. Too many image maps on a single page would create a serious bottleneck and a massive impact on site performance.

Finally, image maps may not be easy for users with visual problems to access. If you did use image maps, you should also create another navigation system for these users as an alternative.

Bottom Line

I use image maps from time to time when I am trying to put together a quick demo of a design and how it works.

For example, I may be mocking up a design for a mobile app and I want to 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 even build dummy webpages built to current standards with HTML and CSS.  In this specific example, and because I know what device I will demo the design on and can scale the code to that device, an image map works, but putting them into a production site or app is very tricky and should likely be avoided on today's websites.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 9/7/17.