Image Maps Are Fun, Funky and
Accessible!
Contrary to what one might expect, Image Maps work very well in text
only browsers such as Lynx. Of course no image is displayed, but the links are presented as an easy to navigate list. The "alt" text is
included with the image to provide an understandable link to the navigation list in text browsers.
An image map is an image that has sections designated to act as hyperlinks to other URLs. If you apply a hyperlink to an entire
image, only one hyperlink for the image can be specified. However, if you make use of an image map, you can specify several hyperlinks to the
image. In such cases, an image contains several areas serving as hyperlinks called "hot zones."
The picture in an image map can be a photograph, a nice looking navigation bar using 3d text, a cartoon, anything that fits with the theme of your web page.
Having got your image, you need to specify areas of it to be hot zones, these are the areas that when clicked will navigate to another place or document. It's easiest to use an image map editor to create
these zones, though you can do it by hand. ("MapThis" is a free image map creation tool for Windows, some WYSIWYG HTML editors also include
image map creation tools).
A simple image map may consist of a rectangular image, and two rectangular hot zones. In the example below you can see that a standard <img> tag has been used to insert an image into a web page,
but it has an extra parameter, usemap="#Map". This tells the browser that the image has an image map associated with it.
The image map is defined by the <map></map> tags. The first tag specifies the start of the image map hot zone definitions and the map
name, in case you have more than one image map on a page.
The next two lines define hot zones (areas) to be rectangular in shape, and specifying the
coordinates for each zone in terms of "left, top, right, bottom" relative to the image. So the first hot zone is
from the top left corner of the image, down and right. And the second is also at the top but to the right of the first hot zone. The last
parameter in each hot zone definition is the target URL for the link, for accessibility I have used easily understandable names for these
targets.
<html>
<head>
<title>Image Map</title>
</head>
<body>
<img src="mypic.jpg" alt="Navigation bar" usemap="#Map">
<map name="Map">
<area shape="rect" coords="1,1,200,60" href="Sales.htm">
<area shape="rect" coords="210,1,400, 60" href="Privacy.htm">
</map>
</body>
</html>
Matt Probert
|
