11.3 Introduction to Imagemaps

You've almost certainly seen imagemaps on your trips across the Web. They are pictures with different parts that you can click, and each part takes you to a different URL. Imagemaps let web sites offer pictorial melanges where you can select where you want to go, as an alternative to presenting a boring list of text items.

In this book, the imagemap is generated and interpreted within the program. But you should probably see how most people use conventional imagemaps. They start with a crisp graphic image (preferably GIF, as it is more portable than JPEG). Once they select an image, they must define various hotspots (or areas where users can click), and identify them in an imagemap file in the following format:

    shape URL coordinate1, coordinate2, ... coordinaten

where shape can be "circle," "poly," or "rect"; URL is the file you want to display in response to the user's click; and the coordinates are measured in pixels. Programs exist to help you determine the coordinates of the regions you want to mark within an image. Here is an example of an imagemap file (the following applies to the NCSA server only):

default http://my.company.com
rect http://some.machine.com 0, 0, 50, 50
poly http://www.machine.com/graphic.gif 100, 120, 230, 250, 320, 75
circle http://their.machine.com/circle.gif 100, 100, 150, 150, 100 

The next step is to edit the imagemap.conf configuration file and add an entry like the following:[1]

[1] Modern versions of the NCSA HTTPd server no longer use the imagemap.conf file. You can pass the map file as extra path information to the imagemap program directly, like so:

<A href="/cgi-bin/imagemap/graphics/dragon.map">
<IMG src="/graphics/dragon.gif" ISMAP>

where the map file (dragon.map) is stored in the /graphics directory. Note that this is a virtual path.

    dragon: /graphics/dragon.map

The first part of this statement is the name of the imagemap, while the second part is the relative path to the imagemap data file. Now, the imagemap is all but set up. The only step that needs to be performed is to add the appropriate HTML in a document to access the imagemap:

    <A href="/cgi-bin/imagemap/dragon"><img src="/graphics/dragon.gif" ISMAP></A>

When the user clicks on a point in the image, the client sends the coordinates as query information, and the imagemap name as an extra path to the imagemap CGI program (which comes with most servers). Here is what a typical HTTP client request might look like:

    GET /cgi-bin/imagemap/dragon?53,87

First, the CGI program reads the imagemap configuration file, in order to determine the imagemap data file for the clicked image. It then opens the data file and determines the appropriate URL to access. This is a very inefficient process, as two separate files have to be opened. As a result, many webmasters do not allow users to set up imagemaps.

While this should be enough information to get you started with imagemaps, we will do something much more efficient and fun in our last example--we'll generate the imagemap without using auxiliary files.