What Is an Imagemap?

Earlier in this lesson, you learned how to create an image that doubles as a link simply by including the <img> tag inside a link tag (<a>). In this way, the entire image becomes a link.

In an imagemap, different parts of the image are different links. You can specify that certain areas of a map link to various pages, as in Figure 7.17. Or you can create visual metaphors for the information you're presenting, such as a set of books on a shelf or a photograph with a link from each person in the picture to a page with his or her biography on it.

Figure 7.17. Imagemaps: different places, different links.

There are two kinds of imagemaps: server-side imagemaps and client-side imagemaps. Server-side imagemaps were used in the earlier days of the Web, but they posed some problems for web authors, and have fallen into disuse. In this lesson, client-side imagemaps, which are handled completely by the browser, are used almost exclusively and offer many advantages over older, server-side imagemaps.

Server-side imagemaps are implemented using an image displayed by the client and a program that runs on the server.

Client-side imagemaps work in the same ways as server-side imagemaps, except no program runs on the server. All the processing of coordinates and pointers to different locations occurs in the browser.

Every browser released since Netscape 2.0 supports client-side imagemaps, so there's not really any reason to bother with server-side imagemaps any more. In this lesson, I'm only going to talk about client-side imagemaps. To learn about server side imagemaps, check out the Apache mod_imap documentation at http://httpd.apache.org/docs/mod/mod_imap.html.