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.

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 ...

Get XHTML by Example now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.