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-
side ( usemap ) image map. [ <map>, 6.5.3 ] [ <area>, 6.5.4 ] [ <img>,
5.2.6 ]
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.)
Search WWH ::

Custom Search