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

Custom Search