Image Maps

Image maps provide a technique to divide a single image into a range of areas that can each have their own Alt text and which, in turn, can be linked to different pages. This is a useful feature for providing interactive site navigation to your users that is a little more interesting than a traditional menu. For example, the first page of the Dreamweaver Interface material uses an image map (combined with multiple rollover images).

Image maps are made from ordinary images using the Map tools in the Properties window for the image. The first step is to place the image that you wish to use for your map in your page using the techniques already described. Once the image is in place you can add the map regions.

Adding Image Map Hot Spots

Each clickable region in the map is called a "Hotspot". You can have as many hotspots in an image as necessary, although remember that your user needs to be able to easily select the appropriate region of the image.

Once you have inserted your image, click on it to select it. In the properties window for the image, in the bottom left corner are the controls for creating the image map hotspots. There are four controls: the first is a Pointer tool that will let you move and resize existing hotspots and the remaining three tools let you create hotspots with different shapes. The first creates a rectangular hotspot, the second creates a cirular hotspot, and the third creates polygon hotspots. If you are used to using the various selection tools in Photoshop, for example, these will be familiar to you.

For each hotspot that you add to an image Dreamweaver will prompt you to provide an Alt text entry. You can also specify a link for the hotspot, which will be activated when the user clicks in the hotspot.

Example Image MapThe image on the left shows the Chan Temple picture with three hotspots added. There is a rectangular hotspot over the statue on the left, a circular hotspot around the large central Buddha, and an irregular polygon hotspot over the reflection on the floor.

In Dreamweaver the hotspots are indicated with a pale blue mask. However, when the image is displayed in the browser, no visual cues are given to the user as to the location of any hotspots. You should usually, therefore, include some additional descriptive text explaining to the user that the image is clickable.

Chan Temple Image Map Central Statue Side Statue Reflection For example, the image on the right is the live, clickable version of the image map shown above.

Note that the mouse cursor will be the normal arrow pointer when it enters the image, until it actually enters the hotspot, at which point it will become the usual "pointing hand" cursor used to indicate links. You will see the title text for each hotspot as you position the mouse. In this example I have not linked the hotspots to other pages. This would be done in exactly the same way as previously described for each hotspot individually.