Tips for Creating an Image Map with Dreamweaver

Get the facts in five minutes

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

Want to know how to create an image map with Dreamweaver? With this five-minute tutorial, get the facts you need. The process is not especially difficult, but it's not easy either, so you should have some experience before you begin. For example, it's important to know what an image map is and why it's useful.

What Are Image Maps?

Simply put, image maps are images with "hot spots" that are clickable and take your readers to other Web pages.

This is known as site navigation. Dreamweaver MX has a built-in image map creation tool to make it easy to create image maps for your Web pages.

Image maps are helpful for people who may not have a firm grip on the language featured on your site. This includes children or English language learners. Image maps are also helpful if your site features geographical maps. 

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.

Now, draw the shape you want on your image. In the properties window for the hotspot, type in or browse to the page to which the hotspot should link. Continue adding hotspots until your map is complete.

After that, you'll click on the arrow icon to edit other properties of the image. Preview your image map in a browser to make sure it works correctly.

Disadvantages of Image Maps

Beware that image maps have pros as well as several cons. Firstly, 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. With that in mind, aim to have the image map on the home page.

In addition, image maps may not be easy for users with visual problems to access. So you should create another navigation system for these users as an alternative.

Useful Tips

If you still want to create an image map now that you know the disadvantages, here's a tip that can make the process easier: Set up different alt text depending on where your readers are by adding alt text to the hotspots. And, remember, to create the image map, you'll need Macromedia Dreamweaver MX.