Web Design in a Nutshell

Imagemaps

Ordinarily, placing a graphic within anchor tags will make the entire image a link to a single document, regardless of where the user clicks on the image. It is also possible (and quite common) to create multiple links, or “hot spots,” within a single graphic. These graphics are called imagemaps. The effect is created with HTML tags and/or text files and scripts on the server; the graphic itself is an ordinary graphic that just serves as a backdrop for the pixel coordinates.

There are two types of imagemaps: client-side and server-side. For client-side imagemaps, the coordinate and URL information necessary to create each link is contained right in the HTML document. The process of putting the pieces together happens in the browser on the user’s machine (thus, client-side). For server-side imagemaps, as the name suggests, the map information resides on the server and is processed by the server or a separate CGI script.

Client-side imagemaps are a slightly newer technology and are not universally supported by all browsers (although the majority of current browsers know what to do). For this reason, many web developers create redundant imagemaps (both client- and server-side) so that if the browser doesn’t recognize the client-side map, the server’s imagemap processor can take over.

Creating Imagemaps

The key to making imagemaps work is a map, based on the image, that associates pixel coordinates with URLs. This map is handled differently for client-side and server-side ...