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" />
Search WWH ::




Custom Search