Creating Image Maps in Dreamweaver CS5

Adding images to your site is one of the simplest and easiest ways of making your web content come to life. I’d say it’s almost mandatory, actually. After all, what better way to ensure your content resonates with your viewers than to provide visual aids and imagery? You can add further interactivity to your site, however, by making your images more than static visual aids, but a dynamic, multi-part navigation system that can link to other pages on your site. These types of images are called image maps.

What are image maps?

An image map allows a regular image to serve as a type of navigation system. We can use an actual map as a perfect example of this. For instance, when users click on certain locations–sometimes called hotspots--on the image, they can be taken to pages related to those locations.

For example, Southwest Airlines’ Route Map page displays a map of the United States. The cities that Southwest flies to are indicated with a small circle. When users click on a circle or city name, they are taken to a page about that city through the use of an image map.

Image Map Example

How to make an image map

You can make any image an image map by designating clickable areas on it and giving it a link or an action. To create an image map, insert an image (Insert –> Image) on a page and select it in Design View. The image map tools are available in the Properties Inspector as seen below:

Image Map Buttons

Clickable hotspots can be created in three shapes:

  • Rectangles
  • Circles
  • Polygons

Once a hotspot has been placed on an image, the link location must be completed. Each hotspot may link to a different page.

And that’s all there is to it!

Have you thought of any creative or brilliant image to make into image maps? A map of the world, perhaps, or even a photograph of people? Please share if you have!

Hear about our latest Adobe blogs, classes, and webinars by signing up for ourĀ newsletter.

About Webucator

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, Azure, Windows, Java, Adobe, Python, SQL, JavaScript, Angular and much more. Check out our complete course catalog.

7 thoughts on “Creating Image Maps in Dreamweaver CS5”