HTML and CSS Reference
Figure 12.5 After clicking on a hyperlink: Output from Example 12.2.
An imagemap is an image with clickable areas where each area is represented by a link,
also called a hotspot. An imagemap makes it possible to make one image link to several
pages depending on the area or pixel coordinate positions clicked by the user. A simple
example would be an image of the map of the United States. If the user clicks on Maine,
for example, then a link would navigate the user to another page with information about
that state, a closer image of the state, and so forth.
In the HTML page you simply specify the area of the image (hotspot) and the link
that will be associated with that part of the image. The most time-consuming and boring
part of this process is determining the coordinate positions for the hotspot. This can be
done manually or by an image mapping program. There are a number of programs on
the Web to help you (see Figure 12.6), and many are free. In fact, most HTML editors
have image mapping as a built-in function (see Figures 12.7 and 12.8).