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>, 6.5.3] [<area>, 6.5.4] [<img>, 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 ...
Get HTML & XHTML: The Definitive Guide, 6th 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.
