HTML and CSS Reference
In-Depth Information
6.5. 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 cre-
ative 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 pro-
cessing 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 doc-
ument 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-
6.5.1. 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 mouse-sensitive
one by adding the
ismap
attribute to the
<img>
tag. This special
<img>
at-
tribute tells the browser that the image is a special map containing more
than one link. (The
ismap
attribute is ignored by the browser if the
<img>
tag is not within an
<a>
tag.)
