G.7. Creating and Using Image Maps

In Appendix F, we demonstrated how images can be used as hyperlinks to link to other resources on the Internet. In this section, we introduce another technique for image linking called image maps, which designates certain areas of an image (called hotspots) as links.[1] Figure G.7 introduces image maps and hotspots.

[1] Current Web browsers do not support XHTML 1.1 image maps. For this reason we are using XHTML 1.0 Transitional, an earlier W3C version of XHTML. In order to validate the code in Figure G.7 as XHTML 1.1, remove the # from the usemap attribute of the img tag (line 53).

Figure G.7. Image with links anchored to an image map.

 1  "1.0" ?>
 2  "-//W3C//DTD XHTML 1.0 Transitional//EN"
 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4
 5 
 6 
 7
 8 

"http://www.w3.org/1999/xhtml"> 9

10

11 Internet and WWW How to Program - Image Map 12 13 14 15

16 17

18 19 20 "picture"> 21 22 23 24 25 "form.html" shape = "rect" 26 coords = "2,123,54,143" 27 alt = "Go to the feedback form" /> 28 "contact.html" shape = "rect" 29 coords = "126,122,198,143" 30 alt = "Go to the contact page" /> 31 "main.html" shape = "rect" 32 coords = "3,7,61,25" alt = "Go to the homepage" /> 33 "links.html" shape = "rect" 34 coords = "168,5,197,25" 35 alt = "Go to the links page" /> 36 37 38 39 "poly" alt = "E-mail the Deitels" 40 coords = "162,25,154,39,158,54,169,51,183,39,161,26" 41 href = "mailto:[e-mail]" /> 42 43 44 45 "mailto:[e-mail]" 46 shape = "circle" coords = "100,36,33" 47 alt = "E-mail the Deitels" /> 48 49 50 51 52 "deitel.gif" width = "200" height = "144" 53 alt = "Deitel logo" usemap = "#picture" />

54 55 56

Lines 2048 define an image map by using a map element. Attribute id (line 20) identifies the image map. If id is omitted, the map cannot be referenced by an image (which we will see momentarily). Hotspots are defined with area elements (as shown in lines 2527). Attribute href (line 25) specifies the link's target (i.e., the resource to which to link). Attributes shape (line 25) and coords (line 26) specify the hotspot's shape and coordinates, respectively. Attribute alt (line 27) provides alternative text for the link.

Common Programming Error G 4

Not specifying an id attribute for a map element prevents an img element from using the map's area elements to define hotspots.

 

The markup in lines 2527 creates a rectangular hotspot (shape = "rect") for the coordinates specified in the coords attribute. A coordinate pair consists of two numbers representing the locations of a point on the x-axis and the y-axis, respectively. The x-axis extends horizontally and the y-axis extends vertically from the upper-left corner of the image. Every point on an image has a unique x-y-coordinate. For rectangular hotspots, the required coordinates are those of the upper-left and lower-right corners of the rectangle. In this case, the upper-left corner of the rectangle is located at 2 on the x-axis and 123 on the y-axis, annotated as (2, 123). The lower-right corner of the rectangle is at (54, 143). Coordinates are measured in pixels.

Common Programming Error G 5

Overlapping coordinates of an image map cause the browser to render the first hotspot it encounters for the area.

 

The map area at lines 3941 assigns the shape attribute "poly" to create a hotspot in the shape of a polygon using the coordinates in attribute coords. These coordinates represent each vertex, or corner, of the polygon. The browser connects these points with lines to form the hotspot's area.

The map area at lines 4547 assigns the shape attribute "circle" to create a circular hotspot. In this case, the coords attribute specifies the circle's center coordinates and the circle's radius, in pixels.

To use an image map with an img element, you must assign the img element's usemap attribute to the id of a map. Lines 5253 reference the image map "#picture". The image map is located within the same document, so internal linking is used.