Appendix A: The Image Map Editor index | previous | next

Making an Image Map

To create an image map, you draw the hotspots on the map directly in the Document window, and then designate the link for each hotspot. You can also provide a target window for those links and an alt tag for each hotspot.

To draw the hotspots:

  1. Select the image in the Document window (Figure 6).

  2. On the Properties inspector, select a drawing tool from the toolbox (rectangle, oval, or polygon) by clicking on it (Figure 7). The pointer will turn into a set of crosshairs.

  3. Draw the shape on the area of the image where you want the hotspot (Figure 8). When you let go of the mouse button, the hotspot will appear on your image (Figure 9). For tips on drawing polygons and on moving and resizing hotspots, see the next page.

Setting the Links

You can set links as you go along, or you can set them later on.

To set a link:

  1. Select the hotspot by clicking on it (Figure 9). The Properties inspector will display Hotspot properties. You can You can also select all image real estate outside the hotspots by clicking on a blank area of the image.
  2. In the link text box:
    • Type or paste the URL of the destination page, or
    • Click on the Browse button to select a file from your local site, or
    • Click on the Point to File icon to point to a file that's open or that's listed in the Sites window
  3. Then, press Enter (Return). Be sure to test your links.
  4. To add a target for a hotspot, select it from the Target drop-down menu.
  5. To add an Alt tag for your hotspot, type it in the Alt text box.
 
Fig. 6   Select the image in the Document window.


 
Fig. 7   Click on a hotspot tool on the Properties inspector. The pointer will turn into crosshairs as you prepare to draw.


 
Fig. 8  Drawing a hotspot in the Document window.


 
Fig. 9  Drawing a hotspot in the Document window.

Tips

  • The hotspot pictured in Figure 9 is actually a livve hotspot. I've linked it to the index page for this index. Go ahead, try it! You can also view the source of this page to see the code for this simple map.
  • Hotspots appear as transparent aqua spots on the image. These spots will not appear in the browser.

  • Selected hotspots have selection handles that you can click and drag to resize the image.
  • For more about using frames and targets, see Chapter 13. For more about images and Alt tags, see Chapter 5.