HTML & XHTML: The Definitive Guide, 5th Edition

Mouse-Sensitive Images

Normally, an image placed within an anchor simply becomes part of the anchor content. The browser may alter the image in some special way (usually with a special border) to alert the reader that it is a hyperlink, but users click the image in the same way they click a textual hyperlink.

The HTML and XHTML standards provide a feature that lets you embed many different links inside the same image. Clicking different areas of the image causes the browser to link to different target documents. Such mouse-sensitive images, known as image maps, open up a variety of creative linking styles.

There are two ways to create image maps, known as server-side and client-side image maps. The former, enabled by the ismap attribute for the <img> tag, requires access to a server and related image-map processing applications. The latter is created with the usemap attribute for the <img> tag, along with corresponding <map> and <area> tags.

Translation of the mouse position in the image to a link to another document happens on the user’s machine, so client-side image maps don’t require a special server connection and can even be implemented in non-Web environments, such as on a local hard drive or in a CD-ROM-based document collection. Any HTML/XHTML can implement a client-side (usemap) image map. [<map>] [<area>] [Section 5.2.6]

Server-Side Image Maps

You add an image to an anchor simply by placing an <img> tag within the body of the <a> tag. Make that embedded image into a ...