dreamweaver

Inserting Image Maps

You can convert an image you've inserted onto a Web page into an interactive map with "hot spots" that, when clicked on, will open up other Web pages.

Thus you might take a graphic file that is a map, insert it on a Web page, and then use the hot spots to call up other pages with information on the different locations on the map.

To convert an image to an image map with hot spots, first insert the image onto a Web page and then click on it to select it.

In the Properties panel, look on the lower left for the area labeled Map, where you'll see light blue icons for the three tools you can use to select areas of a image and create hot spots.

The tools are:

  • a rectangle, for drawing rectangular shaped hot spots
  • a circle for drawing circular hot spots
  • a polygon, for drawing custom shaped hot spots.

Click on one of the three tools and then click on the area on your image where you want your hot spot to appear.

With the rectangle and circle tools, hold down your mouse and then drag your cursor to create a rectangle or square of the size you want.

With the polygon tool, click repeatedly around the area you want as a hot spot until the lines you create connect to each other.

When you've created a hot spot on an image, Dreamweaver will display it in a shaded color.

Click on the hot spot, and in the Property panel you type a URL or a folder/file path into the Link field to specify the page the hot spot will link to. Then when someone clicks on that hot spot, their Web browser will open up the new Web page you specified in the Link field.

You also should type in some alternative text, which are words that describe the hot spot you've created on the image. This will help a vision-impaired person using a screen reader know what the hot spot on the image map is about.

Create other hot spots on your image using the same procedure.

When you're done, click on the small arrow icon in the lower left to return to the Property panel for making general edits of your image.

To see the image map and its hot spots, save the page and then preview the page in a Web browser.