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 arearea
elements for each hotspot within the image.-
<area shape="rect" coords="203,23,285,106" href=
http://www.nasa.govalt=""/>
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 ...
Get Web Design in a Nutshell, 3rd Edition 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.