Image Maps

---

Another form of clickable images, discussed previously in Chapter 4, is the image map. An image map is a large image that contains numerous hot spots that can be selected, sending the user to a different anchor destination. Recall from the previous chapter that there are two basic forms of image maps: server-side and client-side . In the server-side image map, the user clicks on an image but the server must decode where the user clicked before the destination page (if any) is loaded. With client-side image maps, all of the map information ”which regions map to which URLs ”can be specified in the same HTML file that contains the image. Including the map data with the image and letting the browser decode it has several advantages, including the following:

• There is no need to visit a server to determine the destination, so links are resolved faster.

• Destination URLs can be shown in the status box as the user's pointer moves over the image.

• Image maps can be created and tested locally, without requiring a server or system administration support.

• Client-side image maps can be created so that they present an alternate text menu to users of text-only browsers.

Although it's clear that client-side image maps are far superior to their server-side cousins, very old browsers may not support this feature. This does not have to be a problem, as it is possible to include support for both types of image maps at once.

Server-Side Image Maps

To specify a server-side image map, the a element is used to enclose a specially marked img element. An <a> tag's href attribute should be set to the URL of the program or map file to decode the image map. The enclosed <img> tag must contain the attribute ismap so the browser can decode the image appropriately. As with all linked images, it might be desirable to turn the image borders off by setting the <img> tag's border attribute equal to . As mentioned in Chapter 4, server-side image maps do not provide adequate feedback to the user because they show coordinates, and may incur performance penalties. HTML authors are encouraged to use client-side image maps.

Client-Side Image Maps

The key to using a client-side image map is to add the usemap attribute to an < img> tag and have it reference a map element that defines the image map's active areas. An example of this syntax is < img src="controlbar.gif" usemap="#controlmap" /> . Note that, like server- side image maps, the image will be indicated as a link regardless of the lack of an < a> tag enclosing the image. The border attribute should be set to if necessary. The map element generally occurs within the same document, although it might be possible to link to a map element outside the document though this use is uncommon and support in browsers is inconsistent. While the map element can occur anywhere within the body of an HTML document, it usually is found at the end of HTML documents.

The map element has two important attributes, name and id , which are used to specify the identifier associated with the map. While id is standard XHTML, browser support still often favors name , so both are included for safety purposes. The map name then is referenced within an < img> tag using the usemap attribute and the associated fragment identifier. Within the < map> tag are " shapes " defined by <area> tags that are mapped onto an image and define the hot spots for the image map. A brief example is shown here with a detailed discussion in Chapter 4 and full syntax of related tags in Appendix A.

  <img src="shapes.gif" usemap="#shapes" alt="shapes map"   border="0" width="400" height="200" />   <div>  <!-- start of client side image map -->  <map name="shapes" id="shapes">   <area shape="rect" coords="6,50,140,143" href="rectangle.html"   alt="rectangle" />   <area shape="circle" coords="195,100,50" href="circle.html"   alt="circle" />   <area shape="poly"   coords="255,122,306,53,334,62,338,0,388,77,374,116,323,171,255,122"   href="polygon.html" alt="polygon" />   <area shape="default" href="defaultreg.html" alt="" />   </map>   </div>  

While the format of the mapping tags is discussed in Chapter 4, memorizing or creating client- or server-side image maps by hand is not advised. Page designers should find that most Web page editors like Macromedia Dreamweaver or HomeSite automate the creation of image hot spots.

---