Start Basics Color Forms Frames Images Links Lists Tables Type

Images: Dreamweaver 4:
Create an Image Map

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 Property Inspector will appear.
Images Property Inspector
Note:  If you can't find the Property Inspector, choose, Window, Properties from the main menu bar to activate the Property Inspector.
  • 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. 

Hot Spot shapes
Hot Spot shapes

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 Hot Spot Property Inspector will appear.
Hot Spot Property Inspector
Type your URL in the Link text box.
To add more hot spots to the same image, repeat the process.

Images: Dreamweaver 4:
Overview
Add Images to a Page
Add a Background Image to a Page
Turn an Image into a Hyperlink
Create an Image Map

Start Basics Color Forms Frames Images Links Lists Tables Type

Personal Home PageWeb Design CenterTutorial MenuTop of Page

Web Design Center
Last Revised: September 2, 2001
© Agatha Taormina