This browser does not support basic Web standards, preventing the display of our site's intended design. May we suggest that you upgrade your browser?

Adobe Dreamweaver CS3

Image Maps: Working with Hotspots

An image map is an image that contains one or more clickable sections. These are referred to as hotspots and they function as hyperlinks. In Dreamweaver, you can create oval, rectangular, or polygonal hotspots. You can also edit hotspots by selecting, moving, and deleting them, or by changing a hyperlink.

NOTE: For more information on links, refer to Linking to Pages in Your Collection and Linking to Internet Resources. A good example of hotspots is the Campus Virtual Tour, which provides a map of the campus that links to all of the campus buildings at UW-Eau Claire.

return to topCreating Hotspots

In Dreamweaver, you can create three different types of hotspots: oval, rectangular, and polygonal.

Creating Oval or Rectangular Hotspots

If a portion of an image contains an oval, such as a basketball, an oval hotspot would be the best choice. A rectangular hotspot can be used for portions of images that resemble a rectangle or square. This section will explain how to create oval or rectangular hotspots.

  1. Select the image that will contain the hotspot
    The Image Properties pane appears.
    Image Properties pane

  2. Click OVAL HOTSPOT TOOLOval Hotspot tool or RECTANGULAR HOTSPOT TOOLRectangular Hotspot tool

  3. Position the pointer over the selected image

  4. Click and drag the pointer to create the desired shape and size of the hotspot
    An Adobe Dreamweaver CS3 dialog box appears, reminding you to enter an Alt description for your image map.

  5. Click OK
    The Hotspot Properties pane appears.
    Hotspot properties pane

  6. To assign a URL to the hotspot, in the Link text box, type the correct link information
    OR
    To browse for a file on your computer, click BROWSE FOR FILEBrowse for file button
    OR
    To point to the file, click POINT TO FILEPoint to file buttonand drag to the correct file in the Files pane
    The hotspot is created.

Creating Polygonal Hotspots

If your image is a map of the United States, each state would be an individual hotspot with a hyperlink assigned to it; therefore, images like this should use the Polygon Hotspot Tool to create precisely shaped hotspots. This section will explain how to create a polygon hotspot.

  1. Select the image that will contain the hotspot
    The Image Properties pane appears.
    Image Properties pane

  2. Click POLYGON HOTSPOT TOOLPolygonal Hotspot tool

  3. Position the pointer over the selected image

  4. On the image, click where you want the first corner of the polygonal hotspot to start
    An Adobe Dreamweaver CS3 dialog box appears, reminding you to enter an Alt description for your image map.

  5. Click OK
    The Hotspot Properties pane appears.
    Hotspot properties pane

  6. Continue placing additional corners by clicking elsewhere on the image

  7. To assign a URL to the hotspot, in the Link text box, type the correct link information
    OR
    To browse for a file on your computer, click BROWSE FOR FILEBrowse for file button
    OR
    To point to the file, click POINT TO FILEPoint to file buttonand drag to the correct file in the Files pane
    The polygonal hotspot is created.

return to topEditing Hotspots

After you have created a hotspot, you can manipulate it in a variety of ways: moving a hotspot, deleting a hotspot, resizing a hotspot, and changing a hotspot's hyperlink.

Moving a Hotspot

  1. Select the hotspot you wish to move
    Sizing handles appear on the sides and corners of the hotspot.

  2. Click and drag within the hotspot to move it to the new location
    HINT: Do not click the sizing handles.

Deleting a Hotspot

  1. Select the hotspot you wish to delete
    Sizing handles appear on the sides and corners of the hotspot.

  2. Press [Delete]

Resizing a Hotspot

  1. Select the hotspot you wish to resize
    Sizing handles appear on the sides and corners of the hotspot.

  2. Click on a sizing a handle and drag it until the hotspot is of a desired size

Changing a Hotspot's Hyperlink

Sometimes it is necessary to change the hyperlink for an existing hotspot.

  1. Select the hotspot that contains the hyperlink you wish to change
    Sizing handles appear on the sides and corners of the hotspot.

  2. In the Hotspot Properties pane, in the Link text box, type the new link information
    OR
    To browse for a file on your computer, click BROWSE FOR FILEBrowse for file button
    OR
    To point to the file, click POINT TO FILEPoint to file buttonand drag to the correct file in the Files pane
    The link is updated.

Excellence. Our Measure. Our Motto. Our Goal.