imagemaps

Imagemaps

Concept

Imagemaps provide a way of associating anchors with image data. Anchors for textual data, as you know, are embedded within the content of HTML documents, using anchor tags. Thus, one must have write access to a Web page/file in order to place anchors in it. By contrast, image anchors are external to the data and, thus, anyone may attach anchors to any image that can be referenced through the Web.

One way to think about imagemaps is that they are like transparencies that may be placed over the image. One then identifies regions in the underlying image where the anchor is to be located and marks those locations on the transparency. When a user points with the mouse to some place within one of the regions and clicks, the associated anchor is followed, like pointing to a textual anchor and clicking to follow that link. A major difference, however, is that current Web browsers do not visibly indicate the regions where image anchors are located. So, users just have to click someplace and see what happens. In practice, this limitation is not so bad as it may first seem, since imagemaps are often used with respect to graphic representations of buttons, maps of the US, and other similar visual data where some sort of "natural" association between region and anchor is apparent.

This discussion will be based on the NCSA HTTPD server, v. 1.4.2. See NCSA's Imagemap Tutorial for detailed documentation.

General approach

The best way to put it is that imagemaps are a kluge. They use a feature of the Web architecture called the Common Gateway Interface (CGI). We'll talk a lot about CGI in the next few weeks, but for now think of it as a mechanism that allows a Web server to call an external program, pass it data for processing, receive back its output, and pass that data along to a Web browser for display to the user.

For imagemaps, the Web server uses a special program, called imagemap, that does all the magic associated with imagemaps. The way the server knows that the imagemap program is to be called is that it runs across the keyword, imagemap, in the path of the URL within an executable directory, such as cgi-bin.

After encountering the keyword, imagemap, it then treats the rest of the path in the URL in a special way, which will be described below, to locate a map file. The map file contains the mapping between a designated region of the image and a URL to be followed when that region is selected by the user.

Specific approach

We will be using a different Web server, identified as HTTP://www2.cs.unc.edu. The top of its file space is the class directory, wwwc-f95. The implications of this will be seen in certain URLs listed below.

Creating Imagemaps

There are three basic steps to creating an imagemap:

Get a (GIF) image.
While some browsers support other types of images, GIF is the current "common denominator". So, the first thing to do is locate a GIF image. It can be one you create, using a paint, drawing, other image application; it can be one you scan in; or it can be someone else's image for which you have the URL. If you create an image using a drawing application, you may have to save it in some intermediate format (e.g., PICT2) and then convert it to GIF.
Create a map file for the image that identifies regions and associates them with URLs.
Different servers use different conventions for designation regions and their associated URLs. This discussion will be based on the NCSA HTTPD server, v. 1.4.2.
The map file consists of lines that include three fields:
- keyword that identifies the form (also called the METHOD), such as RECT, CIRCLE, POLY, and POINT. You can also designate a DEFAULT option for any region not included in one of the designated regions.
- URL to be followed when any position within the designated region is selected
- coordinates that determine the region; coordinates required are different for the different forms. For example, RECT is specified by coordinates for upper left and lower right corners, while circle is the center and any point on the circle, itself.
- example:
  RECT HTTP://www.cs.unc.edu/wwwc-f95/members/jbs/1.html 10,8 64,63
The easiest way to create a map file is to use a tool such as WebMap. It allows you to display a GIF image and then draw regions over the image using rectangles, circles, and other conventional drawing tool forms. Once a region is identified, you can then add the URL to be associated with that region. When the data are saved, WebMap creates a map file that includes the URL and the designated region.
Tools for other platforms can be found through Yahoo's Imagemap Directory.
Create an imagemap anchor within a conventional HTML document:
- In the HREF portion, treat the URL as having two parts that are concatenated:
  - the first part traces the path to imagemap
  - the second part traces the path to the map file
  - example: HREF="http://www2.cs.unc.edu/cgi-bin/imagemap/members/jbs/4_buttons.map"
- In the display portion, include the IMG SRC= reference, as a conventional URL, to the GIF image that will be displayed and to which the map file applies. You must also add the keyword, ISMAP, after the URL to tell the Browser to pass along the coordinates of the mouse to the server and, hence, the imagemap program. It is separated from the URL by a space. For example, IMG SRC="4_buttons.GIF" ISMAP

Note

The Web pages pointed to in the URLs within the map file are conventional, but they must exist. Hence, they won't be discussed further here.

Also, be aware that the conventions for specifying map files for the Web server assumed here (NCSA HTTPD v.1.4.2) are different from those of other servers and for earlier versions of the NCSA HTTPD server.

email: jbs@cs.unc.edu

url: http://www.cs.unc.edu/~jbs/

Go to course homepage