Previous Section  < Day Day Up >  Next Section

5.4 Image Maps

As Chapter 4 makes clear, it's easy to turn a graphic into a clickable link. It's also possible to add multiple links to a single image.

Suppose your company has offices all over the country, for instance, and you want to provide an easy way for your visitors to locate the nearest state office. One approach would be simply to list all of the state names and link them to separate pages for each state. But that's boring! Instead, you could use a map of the United States梠ne image梐nd turn each state's outline into a hotspot that's linked to an appropriate page, listing all of the offices in that state.

The array of invisible link buttons (called hotspots) responsible for this magic is called an image map. An image map image map contains one or more hotspots, each leading somewhere else.

Here's how to create an image map:

  1. Select the graphic you wish to make into an image map.

    The Property inspector displays that image's properties and, in the lower-left corner, the image map tools, shown at bottom in Figure 5-13. (These appear in the lower half of the Property inspector, which appears only if the Property inspector is fully expanded [Section 1.2.3]).

    Individual links on an image map梒alled hotspots梥how up in transparent blue in Dreamweaver. When you select a hotspot, the Property inspector displays its Link, Target, and Alt properties. The lower half of the inspector displays the name of the map as well as tools for selecting and drawing additional hotspots.
    figs/05_13.jpg
  2. In the Map field of the Property inspector, type a name for the map.

    The name should only contain letters and numbers, and can't begin with a number. If you don't give the map a name, Dreamweaver automatically assigns the map the ingenious name Map. If you create additional image maps, Dreamweaver will call them Map2, Map3, and so on.

  3. Select one of the image map tools.

    Choose the rectangle tool, the circle tool, or the polygon tool depending on the shape you have in mind for your hotspot. For instance, in the image in Figure 5-13, the polygon tool was used to draw each of the oddly shaped hotspots.

  4. Draw the hotspot.

    To use the rectangle and circle tool, click directly on your picture; drag diagonally to form a rectangle or circle. To make a perfect square, press Shift while dragging with the rectangle tool. (The circle tool always creates a perfect circle.)

    To draw an irregularly shaped hotspot using the polygon tool, click once to define one corner of the hotspot. Continue clicking until you've defined each corner of the hotspot. Dreamweaver automatically joins the corners to close the shape.

    Dreamweaver fills in the inside of the hotspot with a light blue tint to make it easy to see. (Your Web visitors won't see the blue highlighting.)

    If you need to adjust the hotspot you've just drawn, click the arrow tool on the Property inspector. You can drag the light blue square handles of your hotspot to reshape or resize the area, or drag inside the hotspot to move the whole thing. If you change your mind about the hotspot, press Delete to get rid of it altogether.

  5. Add a link to the hotspot.

    After you draw a hotspot, that same hotspot is selected; its properties appear in the Property inspector (see Figure 5-13). Use any of the techniques discussed in Section 4.2 to link this hotspot to another Web page or anchor.

  6. If necessary, set the Target property.

    Most of the options in the Target pop-up menu are useful only when you're working with frames, as discussed in Chapter 9. The _blank option, however, can be useful any time: It forces your visitor's Web browser to load the linked page into a new browser window. The original page remains open, underneath the new window.

  7. Set the Alt property of the hotspot.

    By typing a label into the Alt box in the Property inspector, you provide a written name for this portion of the graphic. As noted in Section 5.2.2, Alt tags are extremely important to people who surf the Web with graphics turned off, or who use textto- speech reading software.

  8. Repeat steps 2-7 for each hotspot you wish to add to an image.

    As you work, you can see the light-blue hotspots filling in your image map.

5.4.1 Editing a hotspot's properties

As noted in step 4 above, you can change a hotspot's shape by dragging its tiny square handles. But you can also change its other properties梬hich Web page it links to, for example.

To do so, click to select the image map. Using the black arrow tool梩he hotspot selection tool梠n the Property inspector (see Figure 5-13), click the hotspot you wish to edit. Then use the Property inspector controls to edit the Link, Target, and Alt properties.

If you're having a fit of frustration, you can also press Delete or Backspace to delete the hotspot altogether.

    Previous Section  < Day Day Up >  Next Section