Section 5.4. Image Maps

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 Statesone imageand 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 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, as described on Section 1.2.3.)

    Figure 5-13. Each link on an image map is called a hotspot. 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.
  2. In the Map field of the Property inspector, type a name for the map .

    The name should contain only 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 calls 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.


    Note: If you have the images accessibility preference setting turned on (Section 5.2.3), you'll get a window reminding you to add an Alt property to the hotspot you're about to draw. Each hotspot can have its own Alt description.
  4. Draw the hotspot .

    To use the rectangle and circle tools, 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 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.


    Tip: After you draw a hotspot, the drawing tool is still active so that you can draw additional hotspots. Click the arrow tool in the Property inspector to deselect the hotspot drawing tool.
  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 on Section 4.1.5 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 the online chapter about frames, which you can find at www.sawmac.com/dw8/ frames .pdf. The "_blank" option, however, is 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 on Section 5.2.1, alt tags are extremely important to people who surf the Web with graphics turned off, or who use text-to-speech reading software.

  8. Repeat steps 27 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, you can change a hotspot's shape by dragging its tiny square handles. But you can also change its other propertieswhich Web page it links to, for example.

To do so, click to select the image map. Using the black arrow toolthe hotspot selection toolon the far left side of 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.



Dreamweaver 8[c] The Missing Manual
Dreamweaver 8[c] The Missing Manual
ISBN: 596100566
EAN: N/A
Year: 2006
Pages: 233

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net