HTML and CSS Reference
In-Depth Information
Listing 6-16.
An image map with a single, clickable
area
element
<map name="crime-map" id="crime-map">
<area href="crime-junction.html" alt="Crime Junction">
</map>
The
href
attribute of the
area
element functions exactly as it does on the
a
element and can be a full
URL, a relative URL (as seen here), or a link to a portion of the current page. You are also encouraged,
when supplying an
href
, to include the
alt
attribute which specifies the text of the link.
Next, we'll introduce you to the different shapes you can create using the
area
element.
Rectangles
Creating a rectangular shape on your image map is as easy as setting the value of the
shape
attribute to
rect
, as shown in Listing 6-17.
Listing 6-17.
An image map with a rectangular area
<map name="crime-map" id="crime-map">
<area shape="rect" coords="10,5,100,50">
</map>
When adding rectangular areas to a
map
, the
coords
attribute must be given four integers. These values
are the coordinates, in pixels, of the top left corner of the rectangle (the first pair of integers) and the
bottom right of the rectangle (the second pair of integers). Both pairs of values are calculated with respect
to the top left corner of the image.
In the example above, we've created a rectangular region that begins ten pixels from the left edge and 5
pixels from the top of the image, extends 90 pixels wide, and is 45 pixels tall. It's important that the first
value be less than the third value and the second value be less than the fourth.
Circles
Creating a circular shape on your image map is similarly easy, as you see in Listing 6-18.
Listing 6-18.
An image map with a circular area
<map name="crime-map" id="crime-map">
<area shape="circle" coords="50,30,20">
</map>
The above example, using the
circle
value of the
shape
attribute, creates a circle whose center point is
fifty pixels from the left edge of the image (the first value), is thirty pixels from the top edge of the image
(the second value), and has a radius of 20 pixels (the third value).
Polygons
As we've seen so far, creating rectangles and circles is fairly straightforward. Creating polygonal shapes
on an image can get very complicated very fast. Polygons, however, can be the most useful shapes.
