Dreamweaver: Creating an Image Map

This tutorial covers the basics of creating an image map in dreamweaver, what they are and how they work. This tutorial assumes you have basic knowledge of HTML concepts and a little bit of Dreamweaver experience.

What is an Image Map?

Put simply, an Image Map is a normal, static gif or jpeg image which has various clickable regions defined by html. An example would be a map of the world where by you can click on separate countries to be taken to a different web page or web site.

The regions, (called hotspots), are totally invisible to the user when they are viewing your page and can only tell that there is an area there by the way the mouse cursor changes when moved over one.

This said, it is also possible to change the main image depending on the hotspot that is rolled over.

How do I create an Image Map?

There are a number of ways to create an image map. You can create them yourself by using html to define the regions, or you can even use an image editor such as Adobe Photoshop which comes with a built in Image Map Generator. This tutorial will cover using Macromedia's Dreamweaver to create an Image Map.

Creating an Image Map In Dreamweaver

The first step is to create an image that you will use for your image map. For this tutorial, we will use the world map image below.

Make sure your image is in a folder in your current web site and create a new page, or open an existing page. Then add your image to the page.

Once you have added the image to the page, follow the steps below.

1. Click on the new image and look at its properties panel. Find the field that says Map and enter a name for the new image map. Refer to the image below for a view of the properties of the selected image. Pay particular attention to the area circled in red.
   
   
   
   
2. The next thing we need to do is create the hotspot regions on the image. You have the option of creating a circular region, a rectangular region, or a polygon region. Click on the polygon button and draw an outline around your chosen company. For this tutorial, we shall outline africa. See the image below to see the new hotspot region.
   
   
   
   
3. Once you are done outlining your country, click on cursor icon and click on the new region. The properties for the region will then be shown in the properties panel, similar to the image below.
   
   
   
   
4. Enter the usual hyper link details for the new region, such as the url for when it is clicked, the target window to show the link in, and an alternate piece of text for the image.
5. Repeat the steps above to create your image map.