HTML and CSS Reference
In-Depth Information
Map areas can use one of three shapes: rectangle, circle, or polygon. These shapes
are shown in Figure 5-13. To define a map area of an image, you must determine the
x- and y-coordinates for that shape and then insert the coordinates for the various map
shapes in the HTML code.
rectangle
circle
polygon
Figure 5-13
For a rectangular map area, you use the coordinates of the top-left and the
bottom-right corners. For example, as shown in Figure 5-14a on the next page, the
rectangle's x- and y-coordinates are (46,35) for the top-left corner and (137,208) for the
bottom-right corner. You use “rect” as the value for the shape attribute for rectangles. For
a circular map area, you use the center point and the radius as the coordinates. The x- and
y-coordinates of the center point of the circle in Figure 5-14a are (308,113). If the mouse
pointer is moved along the y-axis (113) to the border of the circle, the x-axis is 380. The
radius can be calculated by subtracting the x-axis value of the center point (308) from the
x-axis value of the circle's right border (380), which gives a radius of 72 (380 2 308). For
circles, you use “circle” as the value for the shape attribute. For a polygonal map area, you
must use the coordinates for each corner of the shape. For example, in Figure 5-14a, the
polygon has five corners with the coordinates (78,309), (183,251), (316,262), (317,344),
and (136,402). For polygonal shapes, you use “poly” as the value for the shape attribute.
Figure 5-14b shows how you would use those x- and y-coordinates in the map statements
needed to define these three shapes as clickable areas.
