HTML and CSS Reference
In-Depth Information
...
<map name="map2">
<area coords="0,0,49,49" href="link1.html">
<area coords="50,0,99,49" href="link2.html">
<area coords="0,50,49,99" href="link3.html">
<area coords="50,50,99,99" href="link4.html">
</map>
6.5.7. Effective Use of Mouse-Sensitive Images
Some of the most visually compelling pages on the Web have mouse-
and hot-key-sensitive images: maps with regions that (when clicked or
selected with the Tab and Enter keys) lead, for example, to more in-
formation about a country or town or result in more detail about the
location and who to contact at a regional branch of a business. We've
seen an image of a fashion model whose various clothing parts lead to
their respective catalog entries, complete with detailed descriptions and
prices for ordering.
The visual nature of these "hyperactive" pictures, coupled with the need
for an effective interface, means that you should strongly consider hav-
ing an artist, a user-interface designer, and even a human-factors ex-
pert evaluate your imagery. At the very least, engage in a bit of user
testing to make sure people know what region of the image to select to
move to the desired document. Make sure the sensitive areas of the im-
age indicate this to the user using a consistent visual mechanism. Con-
sider using borders, drop shadows, or color changes to indicate those
areas that the user can select.
Finally, always remember that the decision to use mouse-sensitive im-
ages is an explicit decision to exclude text-based and image-restricted
browsers from your pages. This includes browsers connecting to the In-
ternet via slow modem connections. For these people, downloading your
beautiful images is simply too expensive. To keep from disenfranchising
a growing population, make sure any page that has a mouse-sensitive
image has a text-only equivalent easily accessible from a link on the
