6.2    Creating Link-Sensitive Graphics (Image Maps)

Link-sensitive graphics (also called image maps) are just links embedded within a graphic. Such an image map defined in HTML consists of three parts:

• Image
  This is the actual image that’s added to the HTML document with the img element. Additionally, within the <img> tag, you must specify the HTML attribute usemap with an anchor to a map element:

  <img src="image.jpg" alt="alternText" usemap="#mapname"> 

• map element
  You also need the map element with the anchor name you specified earlier in the img element with the usemap attribute. The anchor name in the map element must be specified without the leading # in the name, unlike the img element. Between the introductory <map name="mapname"> and the closing </map>, you can define the link-sensitive sections for the graphic. It’s up to you to decide where exactly you write the map element in the HTML document. Thus, you can specify the map element before the img element, for example. In practice, it’s recommended to position the map element at the beginning or end of the document body.

• Coordinates
  You need the coordinates with the actual link-sensitive area for the graphic. For this purpose, a separate area element is used between <map> and </map> for each area. Within the <area> tag, you can define square areas, circular areas, or areas with any number of corners (polygon). For each area element, you define a “clickable” area in the image.

...
<p>Choose a color according to your mood:</p>
<p>
  <img src="images/popart.jpg" alt="Link-sensitive graphic"
   width="200" height="200" usemap="#mood">
</p>
...
  <map name="mood">
    <area shape="rect" coords="0,0,100,100"
     href="colors/cyan.html" alt="Cyan" title="Cyan">
    <area shape="rect" coords="0,100,100,200"
     href="colors/green.html" alt="Green" title="Green">
    <area shape="rect" coords="100,100,200,200"
     href="colors/yellow.html" alt="Yellow" title="Yellow">
    <area shape="rect" coords="100,0,200,100"
     href="colors/red.html" alt="Red" title="Red">
  </map>
... 

Figure 6.8     Each of the Four Colored Areas Was Linked to a Special Page with Its Own <area> Element; Select the Cyan-Colored Area and the HTML Document cyan.html Will Be Called

Figure 6.9     When You Click on the Color, You’ll Get Corresponding Feedback on the Selected Color

6.2.1    Use HTML Attributes for the HTML Element <area>

To define the shape of the area type, you need to specify the desired shape in the HTML attribute shape. For this purpose, you can use rect (= rectangle), circle, and poly (= polygon). Besides specifying the shape via shape, you also need to specify the coordinates of the link-sensitive area with the HTML attribute coords (= coordinates). Here, you use absolute values. You can separate multiple values with a comma. With regard to our example, in the following, the values refer to x1, y1, x2, and y2.

<area shape="rect" coords="100,0,200,100" ...> 

You can use x1 and y1 to define the upper-left corner of the link-sensitive area that extends to the lower-right corner, which you specify with x2 and y2. In this example, we make an indentation by 100 pixels (x1) from the top corner of the graphic to the right and 0 pixels (y1) down to define the upper-left corner. For the bottom-right corner, we move 200 pixels (x2) from the upper-left corner of the image to the right and move 100 pixels (y2) down from that position (see Figure 6.10).

If you use circle for shape, the coordinates are x, y, r (coords="x,y,r"). For example, you would need to specify the following coordinates in relation to Figure 6.10:

<area shape="circle" coords="100, 100, 50" ...> 

This way, you move 100 pixels from the upper-left corner to the right (x) and 100 pixels down (y), arriving at the center of the square. From there, you would draw a link-sensitive area with a radius of 50 pixels, which would define a 100-pixel diameter circle from the center as the link-sensitive area.

Figure 6.10     The Described Link-Sensitive Area

If, on the other hand, you use poly as the shape, you can define any number of coordinates in coords with x1, y1, x2, y2 . . . xn, yn. This enables you to define as many corners as you want. At the end, you have to use the xy coordinates of the first element again to close the polygon.

As with the a element, you need to specify the reference target in the area element using the href attribute. Together with the href attribute, you must also write the alt attribute in the area element.

I added the link-sensitive areas in Figure 6.11 with the nine federal states of Austria using GIMP software and linked them with the official websites, including the website of the capital of the corresponding federal state.

Figure 6.11     Link-Sensitive Areas Can Be More Complex, as in the Case of a Geographical Map

6.2.3    HTML Attributes of <area>

Here’s a short overview of the attributes of <area>. You’ll notice that the area element contains the same attributes as a hyperlink with the a element.

Table 6.4     The HTML Attributes of the <area> Element