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:
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.)
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
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:
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>
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.
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
height attributes, then in the case where
it lacks those attributes: