Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Blogs

📄 Contents

  1. Introduction
  2. To set up a clickable image map
  3. To enhance hot spots
  • Print
  • + Share This
From the author of

To set up a clickable image map:

  1. Choose an image with which you will create an image map. The image you choose should be large enough to accommodate several hot spots and should include distinct sections that lend themselves to the image map treatment.

  2. Add the image to a GoLive document.

  3. Using the tools I've described in this chapter*, make any necessary changes to the image.

  4. Click on the image.

  5. In the Inspector window, choose the Map tab.

  6. Click the Map checkbox to activate the Map tools. The result looks like Figure 1.

    Figure 1

    Open the Map tab and click Map to activate the image map tools.

  7. Type a name for the image map in the Name field.

    The Image Map toolbar contains the tools you need to create and modify image map hot spots. Refer to Figure 2 for an illustration of all of the available tools.

    Figure 2

    The Map Toolbar includes the tools illustrated here.

  8. Choose one of the three region tools (rectangle, circle, or polygon) that best matches the hot spot shape you want to create.

  9. Draw the hot spot on your image. Handles appear at the sides and corners (Figure 3), so that you can adjust the size of the hot spot if you need to.

    Figure 3

    Create a circular image map by clicking on the circle tool and drawing on your image. You can adjust the hot spot's size with the handles on the sides and corners.

  10. With the hot spot selected, type a URL for it in the Inspector window's URL field or click the Browse button and choose a local file to link to.

  11. Repeat steps 8-10 for each hot spot you want to create.

* Editor's note:  In Chapter 5 of Adobe GoLive 5 for Macintosh and Windows: Visual QuickStart Guide, you'll also learn how to add images to a Web page, resize them, add alt text, create low-res images, align images, and set preferences.

  • + Share This
  • 🔖 Save To Your Account