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 ...

Get HTML & XHTML: The Definitive Guide, 5th Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.