Section G.7. Creating and Using Image Maps | Visual Basic 2005 for Programmers (2nd Edition)

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] Some Web browsers do not support XHTML 1.1 image maps. For this reason we use 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  <?xml version = "1.0" ?>  2  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  3      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  4  5  <!-- Fig. G.7: picture.html -->  6  <!-- Creating and Using Image Maps -->  7  8  <html xmlns = "http://www.w3.org/1999/xhtml">  9     <head> 10        <title> 11           Internet and WWW How to Program - Image Map 12        </title> 13     </head> 14 15     <body> 16 17        <p> 18 19        <!-- the <map> tag defines an image map --> 20        <map id = "picture"> 21 22           <!-- shape = "rect" indicates a rectangular --> 23           <!-- area, with coordinates for the upper-left --> 24           <!-- and lower-right corners --> 25           <area href = "form.html" shape = "rect" 26              coords = "2,123,54,143"              27              alt = "Go to the feedback form" />   28           <area href = "contact.html" shape = "rect" 29              coords = "126,122,198,143" 30              alt = "Go to the contact page" /> 31           <area href = "main.html" shape = "rect" 32              coords = "3,7,61,25" alt = "Go to the homepage" /> 33           <area href = "links.html" shape = "rect" 34              coords = "168,5,197,25" 35              alt = "Go to the links page" /> 36 37           <!-- value "poly" creates a hotspot in the shape --> 38           <!-- of a polygon, defined by coords --> 39           <area shape = "poly" alt = "E-mail the Deitels"         40              coords = "162,25,154,39,158,54,169,51,183,39,161,26" 41              href = "mailto:deitel@deitel.com" />                 42 43           <!-- shape = "circle" indicates a circular --> 44           <!-- area with the given center and radius --> 45           <area href = "mailto:deitel@deitel.com"  46              shape = "circle" coords = "100,36,33" 47              alt = "E-mail the Deitels" />         48        </map> 49 50        <!-- <img src =... usemap = "#id"> indicates that the --> 51        <!-- specified image map is used with this image --> 52        <img src = "deitel.gif" width = "200" height = "144" 53           alt = "Deitel logo" usemap = "#picture" />        54        </p> 55     </body> 56  </html>

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.