A fruity example

Let us assume that you have some pages containing information on some fruit. The pages might be your commercial pages on your fruit products, or scientific research reports on the properties of fruit, or your fruit food recipes, or whatever. In my example, the pages give information about nutritive values of fruit, in Finnish. (No, I don't assume you know Finnish; there is a point in using an example with pages in a strange language.)

You could use images of fruit as links as follows:

Apple Kiwi fruit Pear

Source of the images: Free Food Clipart from Don's Kitchen.

Whether you use links as images that way, and how you do that, is a many-sided question. In the example above, the images have (on most browsers) borders around them, with the border color indicating whether the user has (recently) followed the link or not. It is one of the controversies whether an author should try to suppress the borders (which is technically easy) or to let them be there. In a sense, you have usability against esthetics; my advice is that if you prefer esthetics, make it otherwise very clear to readers that the images are links. See my Links Want To Be Links, which generally recommends using simple textual links, but see also my notes on using images in communication. Sometimes images greatly help, especially when there is something inherently visual involved. An image of a fruit, a good image at least, is more widely understood worldwide than the name of a fruit in any particular language. (In our example, the links point to textual information, but the tabular data there could still be partially understood by someone who doesn't know the language used; "Energia (kJ) 172.0" isn't that hard to decipher, is it?) And in the general case, the document at the end of the link could be inherently visual too, like a collection of photos of fruit trees or fruit varieties.)

Setting it up as an image map

But our topic is image maps, so let us consider the image map alternative. You could use a single image and make its parts hotspots. In my trivial example, I have just combined the three separate images into one; in a more normal case, you would start from a single image, such as a still life painting or photo. And using an image map you could make the parts of the image any shape you like, not just rectangular. My example uses rectangular areas only for simplicity. For such areas, you don't even need any special tools for constructing an image map; you just determine a few coordinates. In the general case, you would use polygons to specify areas, and then you would in practice need some special image mapping software. But these interesting issues are not essential for our discussion of alt texts and popups, so I use a simple example:

Select a fruit to get information about its nutritive value

apple (omena) kiwi fruit (kiivi) pear (päärynä)

The markup used is essentially the following:

<img src="..." alt=
"Select a fruit to get information about its nutritive value"
ismap usemap="#fruit" ... border="0">
<map name="fruit">
<area href="..." alt="apple (omena)" coords="0,60,92,160">
<area href="..." alt="kiwi fruit (kiivi)" coords="0,60,92,160">
<area href="..." alt="pear (päärynä)" coords="0,60,92,160">
</map>

How it works in real text mode

On the text-based Lynx browser, the user would then see the text
Select a fruit to get information about its nutritive value
in a manner that suggests (to Lynx users) its being link-like, and following the link the user would get this menu:

             Select a fruit to get information about its nutritive value

MAP: ../html/fruit.html#fruit

    1. apple (omena)
    2. kiwi fruit (kiivi)
    3. pear (päärynä)

The details vary according to Lynx version, but in any case, it would work quite nicely - about as nicely as it can work without the images.

How graphic browsers fail in no-images mode

But what happens on graphic browsers when the image is not displayed, for some reason? Here's what your current browser does, first in the case where the image has width and height attributes, then in the case where it lacks those attributes:

Select a fruit to get information about its nutritive value Select a fruit to get information about its nutritive value