We've already seen how to use simple graphics as links, containing an <IMG> tag within the <A> & </A> tags. But sometimes you want to go a little further and use one image for more than one link. Then you'd use an Image Map. This cuts an image up into different areas and uses each area as the anchor for a different link.

Take a look at the two images below. They're both the logo for this class, with a border added so you can see the actual dimensions of the image.

The first one is a plain image link. The whole area of the image is active, meaning that anywhere you click on the image, you'll get taken to the next page. Only one page can be linked to an image in this way.

Now look at the second one. It's still the logo, but now it's being used as an Image Map. Move the cursor over it and notice how it changes into a hand at certain points. Also keep your eye on the status bar at the bottom of the screen, and how it changes.

So why would you use an image map? Each image that the browser has to display requires a separate connection and request from your computer to the server. The fewer requests that have to be made, the quicker the page loads. An image map containing 4 or 5 buttons will often load more quickly than those 4 or 5 buttons would individually. Or perhaps you have a single image, like a group photo, that you wish to use for more than one link.

Image maps work because images on computers are made up of pixels, and each individual pixel can be accurately located using a simple coordinate system. In the case of the Class Logo I've used here, the overall image is 200x200, that is 200 pixels wide by 200 pixels high. So the upper-left corner can be pinpointed as (0,0), the upper right would be (0,200), the lower left (200,0) and so on. Using this system any rectangular area can be defined with only four numbers; two for the upper-left corner and two for the lower-right. A circle takes three numbers, two to define the center and one for the radius. Complex shapes can even be specified using polygons.

The MAP and AREA tags

MAP is a container tag, requiring a closing tag, contains only the AREA tag, and takes only the following attribute;

• NAME

AREA is not a container tag, it does not use a closing tag, and takes the following attributes;

• SHAPE
• COORDS
• HREF

Image maps also require the relevant IMG tag to take the following attribute;

• USEMAP

Here we can see the differences in the source code between a standard image link and an image map.

An image map, instead of using <A HREF><IMG></A>, uses a MAP tag, containing some AREA tags, then the IMG tag *without* an A HREF.

MAP & its attributes

The MAP tag itself only takes the NAME attribute. Allowed values for NAME are any text string, and serves to identify the map. You may call it anything you like, except you *may not* use spaces, punctuation, or the #, &, or % symbols.

AREA & its attributes

SHAPE defines the shape of the active area, and allowable values are RECT, CIRCLE, POLY, and DEFAULT. These are all pretty self-explanatory, except DEFAULT. DEFAULT means everything left over after the other AREA's have been specified. It is optional, not using one means that *only* the AREAs specified are active, and if used should come last in the list of AREAs.

COORDS are the coordinate numbers that define the actual location of the AREA in the IMG. Allowable values vary depending on the SHAPE. For a RECT, COORDS consists of 4 numbers in the form "x1,x2,x3,x4", where (x1,x2) is the upper-right corner of the active area and (x3,x4) the lower-right. For CIRCLE, COORDS takes the value "x1,x2,x3", where (x1,x2) is the centerpoint of the active area and (x3) the radius. For POLY, COORDS takes "x1,x2,x3,x4,x5,x6....." where each pair defines a point on the outline of the polygon.

When the SHAPE is DEFAULT, COORDS is not used.

HREF is the URL for the link. It follows all the rules of absolute and relative referencing that we've discussed earlier.

IMG tags for MAPs

When you use an Image Map instead of a standard image link, the IMG tag *MUST* have HEIGHT and WIDTH attributes, and must have one extra attribute. USEMAP defines the MAP for the image, and its value is the same as the NAME of the MAP you want to use. It must be contained in quotation marks, and headed by the # symbol.

Ok, a couple more points about Image Maps.

There are actually a couple of different kinds of Image Maps. What I've just described is a Client Side Image Map (CSIM) where all the information for the map is sent to the visitor's browser. Support for CSIM is pretty well spread at this point, Netscape, Internet Explorer and almost all the other browsers can handle them. Sometimes you will come across Server Side Image Maps (either CERN or NSCA), where the MAP information is kept on the server and every time the mouse moves over the image your browser must connect to the host server to find out what to do. As you can imagine, server side maps are much slower that client side...

When working with Image Maps the MAP can be anywhere in the html file that uses it, in fact, it can even be somewhere else entirely. If you've got an IMG you're repeatedly using as a MAP (like a navigation bar), you can put the MAP in any of the html documents that make up the site and then refer to it in the USEMAP attribute of the IMG tag by its URL. For example, if the MAP for this page were actually part of the index.html page of my site, I would refer to it as:

<IMG USEMAP="index.html#ClassMap">

And finally, now that I've totally confused you with all this, you can promptly forget most of it. The *real* way to create Image Maps is to have a program do it for you.

Go to ZD Net or some other software library and download one of the many free or shareware programs especially written to make this onerous task simple. The best (in my humble opinion) is MapThis. It's freeware, easy to learn and use, and most importantly, free. MapThis lets you draw rectangles, circles and complex shapes directly on the image you plan to use and will create the whole MAP tag for you, including AREA tags and exact COORDS. Much, much easier than sitting down and counting pixels one by one.