140 Chapter 8 – Creating LinksImagemaps
Web Design in a Nutshell, eMatter Editionthe status bar when the user mouses over the area (server-side imagemaps display
only coordinates).
The only disadvantage is that because it is slightly newer technology, they are not
universally supported. Netscape Navigator 1.0 and Internet Explorer 2.0 do not
support client-side imagemaps. Experimental or obscure browser programs may
not either. Fortunately, these browsers make up a tiny portion of the current
browser population.Sample client-side imagemapFigure 8-2 shows a sample imagemapped graphic. Example 8-1 gives the HTML
document that contains the client-side imagemap.Example 8-1: HTML for Client-Side Image Map
<HTML>
<HEAD><TITLE>Client-side Imagemap Sample></TITLE></HEAD>
<BODY>
A <MAP NAME="spacey">
B <AREA SHAPE="RECT" COORDS="203,23,285,106"
HREF="http://www.lunch.com/orbit/">
C <AREA SHAPE="CIRCLE" COORDS="372,64,40" HREF="mypage.html">
D <AREA SHAPE="POLY"
COORDS="99,47,105,41,94,39,98,34,110,35,115,28,120,35,133,38,13
3,42,124,42,134,58,146,56,157,58,162,63,158,67,141,68,145,72,15
5,
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">
</MAP>
E <IMG SRC="orbit.gif" WIDTH=500 HEIGHT=125 BORDER=0
USEMAP="#spacey">
</BODY>
</HTML>A This marks the beginning of the map. You must give the map a name. Within
the<map> there are<area> tags for each hotspot within the image.
B Each area tag contains the shape identifier (shape), pixel coordinates
(coords), and the URL for the link (href). In this case, the shape is the rect-
angle (bothrect andrectangle are acceptable) that corresponds to the
black square in the center of the image.
C This area corresponds to the circular area on the right of the image in
Figure 8-2. Its shape iscircle (circ is also acceptable). For circles, the coor-
dinates identify the position of the center of the circle and its radius in pixels
(coords=x,y,r).