HTML and CSS Reference
In-Depth Information
Figure 2-31
Defi ning a rectangular hotspot
(235, 120)
(310, 150)
<area shape="rect" coords="235, 120, 310, 150" />
The upper-left corner of the rectangle has the image coordinates (235, 120), indicat-
ing that it is 235 pixels to the right and 120 pixels down from the upper-left corner of
the image. The lower-right corner is found at the image coordinates (310, 150), placing
it 310 pixels to the right and 150 pixels down from the upper-left corner of the image.
Note that coordinates are always expressed relative to the upper-left corner of the image,
regardless of the position of the image on the page.
Circular hotspots are defi ned using the coordinates
<area shape=”circle” coords=”
x
,
y
,
r
” ... />
where
x
and
y
are the coordinates of the center of the circle and
r
is the circle's radius.
Figure 2-32 shows the coordinates for a circular hotspot around the CAMshots image
from the Web site logo. The center of the circle is located at the coordinates (92, 82) and
the circle has a radius of 80 pixels.
Figure 2-32
Defi ning a circular hotspot
80 pixels in radius
centered at (82, 82)
<area shape="circle" coords="82, 82, 80" />
Polygonal hotspots are defi ned with
<area shape=”poly” coords=”
x1
,
y1
,
x2
,
y2
,
x3
,
y3
, ...” ... />
where (
x1
,
y1
), (
x2
,
y2
), (
x3
,
y3
) and so forth defi ne the coordinates of each corner in the
multisided shape. Figure 2-33 shows the coordinates for a polygonal region that covers
the CAMshots logo, including the butterfl y wings.
Figure 2-33
Defi ning a polygonal hotspot
(12, 39)
(190, 150)
(12, 150)
<area shape="poly" coords="12, 39, 12, 150, 190, 150" />