Create an Image Map

General Definitions

An image map is a graphic that has more than one "hot spot" or hyperlink on it.

Below is a graphic that uses an image map. When you pass your cursor over each piece of the puzzle, the cursor arrow will turn into a hand.

Clicking on each piece of the puzzle will send you to a different web page as indicated by the text on the puzzle pieces.

To create an image map:

• Place a suitable image on your page. Be sure that your audience will be aware of the need to click on various parts of the image to hyperlink to a number of different locations.
• Click on the image to select it.
• The images section of the Properties panel will appear.

• On the lower left end of the Property Inspector are three shapes: a rectangle, an oval, and a polygon. Choose the shape that most closely approximates the shape you intend your hot spot to be.  (I used the polygon to trace the irregular shapes of the puzzle pieces in the above example.)
• Your cursor will turn into a large cross. 

To define a rectangular or circular hot spot, position the cross over the center of the area where you want to set the hot spot, then move your cursor outward. The shape will form over the selected area.

To define an irregular hot spot (like the ones I defined on the puzzle above) choose the polygon shape and use the cross to select points around the irregular shape you want to select.

To move a hot spot once it has been generated, position your cursor in the center of the hot spot and drag the shape to the new location.

Once you have selected a hot spot, the Hotspot Properties panel will appear.

Type your URL in the Link text box.

Type a description of the hot spot in the Alt text box.

To add more hot spots to the same image, repeat the process.

Web Design Center
Dreamweaver 8 Tutorials
© Agatha Taormina
Last Revised: September 29, 2006