HTML and CSS Reference
In-Depth Information
Table 4.3 Shape coordinates
“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.
The coordinates at point (x,y) indicate the center of the circle. The value of r is the
radius of the circle in pixels.
polygon “x1,y1, x2,y2,
x3,y3”, etc.
The values of each (x,y) pair represent the coordinates of a corner point of the
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="" shape="rect"
coords="24, 188, 339, 283" alt="Door County Fishing" />
<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.
Search WWH ::

Custom Search