Visual Elements and Graphics - Web Development and Design Foundations with XHTML - page 144

Table 4.3 Shape coordinates

Shape Coordinates Meaning

“x1,y1, x2,y2” The coordinates at point (x1,y1) represent the upper-left corner of the rectangle. The

coordinates at point (x2,y2) represent the lower-right corner of the rectangle.

rect

“x,y,r” The coordinates at point (x,y) indicate the center of the circle. The value of r is the

radius of the circle in pixels.

circle

polygon “x1,y1, x2,y2,
x3,y3”, etc.

The values of each (x,y) pair represent the coordinates of a corner point of the
polygon.

This text focuses on rectangular image maps. For a rectangular image map, the value of
the shape attribute is rect and the coordinates indicate the pixel positions as follows:
upper-left corner distance from left side of image, upper-left corner distance from top
of image, lower-right corner distance from left edge of image, and lower-right corner
distance from top of image.

Figure 4.24 shows an image with a fishing boat. The dotted rectangle around the fish-
ing boat indicates the location of the hotspot. The coordinates shown (24, 188) indicate
that the top-left corner is 24 pixels from the left edge of the image and 188 pixels from
the top of the image. The pair of coordinates in the lower-right corner (339, 283) indi-
cates that this corner is 339 pixels from the left image edge and 283 pixels from the
image top. The XHTML code to create this image map follows:

<map name="boat" id="boat">
<area href="http://www.doorcountyvacations.com" shape="rect"
coords="24, 188, 339, 283" alt="Door County Fishing" />
</map>
<img src="fishingboat.jpg" usemap="#boat" alt="Door County"
width="416" height="350" />

Figure 4.24
Sample image map

This example is for a client-side image map. No special Web server processing is needed
for this image map to work. Another, more complex type of image map is a server-side
image map. This type requires a program on the Web server to coordinate the linking.