Foundation HTML5 with CSS3

Linking the Web

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.