Web Design in a Nutshell, 3rd Edition

Sample client-side image map

This is the markup for the client-side image map pictured in Figure 12-9. While most authors use a web authoring tool to generate map markup such as this, it is helpful to have an understanding of what is happening in the map, area, and img elements. Each component of the image map will be discussed in turn.

<map name="spacey">
<area shape="rect" coords="203,23,285,106"
href=http://www.nasa.gov alt=""/>
<area shape="circle" coords="372,64,40" href="mypage.html" alt=""/>
<area shape="poly"
coords="99,47,105,41,94,39,98,34,110,35,115,28,120,35,133,38,133,
42,124,42,134,58,146,56,157,58,162,63,158,67,141,68,145,72,155,
73,158,75,159,80,148,83,141,83,113,103,87,83,72,83,64,80,64,76,
68,73,77,72,79,63,70,59,67,53,68,47,78,45,89,45,99,47"
href="yourpage.html" alt=""/>
</map>

<img src="orbit.gif" width="500" height="125" border="0" usemap="#spacey" />

Figure 12-9. An image map

<map name="spacey">

This marks the beginning of the map. You must give the map a name. Within the map element there are area elements for each hotspot within the image.

<area shape="rect" coords="203,23,285,106" href= http://www.nasa.gov alt=""/>

Each area element contains the shape identifier (shape), pixel coordinates (coords), and the URL for the link (href). In this case, the shape is the rectangle (rect) that corresponds to the black square in the center of the image. The value of the ...