Using image maps

Using image maps

An image map is an image that has been divided into regions, or "hotspots"; when a user clicks a hotspot, an action occurs (for example, a new file opens).

This section covers the following topics:

  • Inserting client-side image maps
  • Modifying an image map

Related topics

  • About image maps

Inserting client-side image maps

When you insert a client-side image map, you create a hotspot area, and then define a link that opens when a user clicks the hotspot area.

To create a client-side image map:

  1. In the Document window, select the image.
  2. In the Property inspector, click the expander arrow in the lower-right corner to see all properties.
  3. In the Map Name text box, enter a unique name for the image map.
  4. To define the image map areas, do one of the following:
    • Select the circle tool and drag the pointer over the image to create a circular hotspot.
    • Select the rectangle tool and drag the pointer over the image to create a rectangular hotspot.
    • Select the polygon tool and define an irregularly shaped hotspot by clicking once for each corner point. Click the arrow tool to close the shape.

    After you create the hotspot, the hotspot Property inspector appears.

  5. Complete the hotspot Property inspector.

    For more information, see Setting the Hotspot Property inspector options.

  6. When you finish mapping the image, click a blank area in the document to change the Property inspector.

Related topics

  • About image maps
  • Modifying an image map

Modifying an image map

You can easily edit the hotspots you create in an image map. You can move a hotspot area, resize hotspots, or move a hotspot forward or back in layer.

You can also copy an image with hotspots from one document to another, or copy one or more hotspots from an image and paste them on another image; hotspots associated with the image are also copied to the new document.

To select multiple hotspots in an image map:

  1. Use the pointer hotspot tool to select a hotspot.
  2. Do one of the following:
    • Shift-click the other hotspots you want to select.
    • Press Control+A (Windows) or Command+A (Macintosh) to select all of the hotspots.

To move a hotspot:

  1. Use the pointer hotspot tool to select the hotspot you want to move.
  2. Do one of the following:
    • Drag the hotspot to a new area.
    • Use the Shift + arrow keys to move a hotspot by 10 pixels in the selected direction.
    • Use the arrow keys to move a hotspot by 1 pixel in the selected direction.

To resize a hotspot:

  1. Use the pointer hotspot tool to select the hotspot you want to resize.
  2. Drag a hotspot selector handle to change the size or shape of the hotspot.

Related topics

  • About image maps
  • Inserting client-side image maps


Getting Started with Dreamweaver
Dreamweaver Basics
Working with Dreamweaver Sites
Laying Out Pages
Adding Content to Pages
Inserting and Formatting Text
Adding Audio, Video, and Interactive Elements
Working with Page Code
Preparing to Build Dynamic Sites
Making Pages Dynamic
Developing Applications Rapidly