Image Maps
The Web site of one of my favorite public places, the Monterey Bay Aquarium, features three separate image maps on its home page; two traditional "navigation bars," and a third based on a composite collage image (see Figure 3.8). Both versions use the same techniques; the collage image simply lets the designer break out of the grid-like effect that using individual images as links can produce.
){kind=link}
The basic idea behind an image map is that specified regions of the image are identified as hot spots by mapping their coordinates to a linked URL using the <area> element. The browser captures the exact coordinates of the spot where the user mouse-clicks within the image, and activates the corresponding link.
Hot spots can be drawn in one of four ways:
- Rect (rectangle)–Two coordinates are used to draw a rectangle: the upper-left corner and the lower-right corner.
- Circle–Three values are used: the x/y coordinates of the circle's center point, and the radius length.
- Poly (polygon)–At least two sets of x/y coordinates, with the last set holding the same values as the first, close the polygon.
- Default–Not a shape so much as the set of all coordinates on the image that are not otherwise defined in a hotspot.
Figure 3.8 An image collage used as a navigation map.
TIP
Although it's possible to create your map definitions by hand, even the most talented Web author will need the assistance of a graphics editor to measure the coordinates of the shapes they intend to utilize. To that end, for day-to-day work, most of us use software that can produce the XHTML code for the map at the same time.
Creating an Image Map with CuteMAP
Begin by launching the map editor software. Start a new map definition by choosing File, New Map and locating the image you'll be working on within the Open dialog box. CuteMAP's interface consists of three panes (see Figure 3.9). The image is displayed in the largest pane, with a source view beneath it. To the left is a data pane, where you'll enter the URL, alternative text, and other data associated with each hot spot within the map.
){kind=link}
Figure 3.9 The CuteMAP user interface.
We'll begin with the island of Kauai, in the upper-left corner of the map. There's plenty of room around it, so a rectangle is both easy and practical here. Select the Rectangle marking tool from the toolbar (see Figure 3.10). The pointer will turn into cross hairs.
){kind=link}
Figure 3.10 The CuteMAP toolbar.
Position the pointer where you want the upper-left corner of the rectangle to be. Click and drag down to the lower-right corner of the rectangle, and then release. The area covered by the new hot spot is framed by a red cross-hatch pattern. In the data pane, enter (at a minimum) the URL and alternative text for the link–in this case, kauai.html and Island of Kauai, respectively (see Figure 3.11).
){kind=link}
Figure 3.11 Entering data for the newly created hot spot.
Repeat the process for each of the remaining islands, choosing the shape that fits best around the island, without overlapping with any other shapes. For Oahu, to the right of Kauai, a circle works well. Molokai can take a rectangle, as can Hawaii. Maui, on the other hand, will work best with a polygon, so we can avoid overlapping with the right side of Molokai's spot.
To create the polygon, select the Polygon marking tool. Click once where you want to begin, and again for each corner of the polygon. Notice that once you've placed two points, the polygon changes shapes as you move and place additional corners, rather like a rubber band being stretched around a set of pegs. When you're finished, right-click to indicate the final corner.
The corresponding HTML is seen in the code pane, beneath the image. The program allows you to copy the code to the Clipboard for import into your text editor. The end result appears in Listing 3.1.
CAUTION
Most of the image mapping tools available, including CuteMAP, aren't accustomed to the case sensitivity and well-formedness requirements of XHTML. If you import the results directly into your text editor, you'll have some cleaning up to do, as you'll instantly have invalid XHTML due to the case issues. I tend to write the definitions by hand, copying over the coordinates. This situation should improve with the next versions of these tools.
Listing 3.1: An Image Map of the State of Hawaii
<img src="hawaii.gif" usemap="#hawaii.gif" width="504" height="386" border="0" alt="Image map for the state of Hawaii" /> <map name="hawaii.gif"> <area shape="rect" coords="2,14,66,69" href="kauai.html" alt="Island of Kauai" /> <area shape="circle" coords="178,104,43" href="oahu.html" alt="Island of Oahu" /> <area shape="rect" coords="238,122,303,147" href="molokai.html" alt="Island of Molokai" /> <area shape="poly" coords="297.157.315.138.398,173,336,214" href="maui.html" alt="Island of Maui" /> <area shape="rect" coords="354,223,501,374" href="hawaii.html" alt="Island of Hawaii" /> </map>