Oceanography 549--Communicating Ocean Science--Spring Quarter 1996

Announcement: Class Session #10 will be held during Finals Week, ....

Imagemaps, Commond Gateway Interface, Access Statistics


The imagemap capability is a powerful one which allows a person accessing your web page to navigate by clicking regions you have defined in your image. There are many good examples of this capability. One I've always liked is at the site for the REINAS project which uses a map of Monterey Bay as a starting point for access to real-time meteorological sensors in the area.

Implementing an imagemap involves three steps:

  1. Prepare an image to be used with the imagemap capability. (All of the pointers we discussed regarding images still apply. Remember that once the image must be viewed in order to navigate further, people with slow connections have no choice but to retrieve the image.)
  2. Make a file specifying the areas within your image that if clicked should link to somewhere else. This is called the map file. Creating this file represents most of the work. The image is described by an x-y coordinate system for the pixels within the image with the coordinate 1,1 located in the upper left hand corner. Different geometric shapes can be used to specify the regions:

    Whether the location of a click matches one of the specified regions is determined in the order the instructions appear in the map file, so that if there are overlapping regions, the one earliest in the file takes precedence.

    The map file can of course be prepared manually, but there are also programs to help with construction of a map file. I use a shareware program called mapedit.

    demo of mapedit to build a map file for
  3. Incorporate the imagemap into your web page. An example of the syntax is

    <a href=http://www.ocean.washington.edu/cgi-bin/imagemap/people/faculty/
    <img src=/people/faculty/mcduff/example.gif ismap></a>.

    The anchor reference consists of two parts. The first part,
    specifies the location of the imagemap program on tsunami. The second part /people/faculty/mcduff/example.map specifies the location of the map file within the document tree. The image itself specified by the <img> tag is made clickable by including the ismap attribute. This attribute means:

    If ismap is present and the image tag is within an anchor, the image will become a "clickable image". The pixel coordinates of the cursor will be appended to the URL specified in the anchor if the user clicks within the ismap image. The resulting URL will take the form "URL?m,n" where m and n are integer coordinates, and the URL will specify the location of a program that will examine the pixel coordinates, and return an appropriate document.

Common Gateway Interface

The imagemap program above is an example of a use of CGI or the Common Gateway Interface. This provides a mechanism of sending changing parameters via a http request for a document and in turn the server responds by running some process to generate the document that will be returned. In the case of imagemap, the parameters that are sent are the coordinates within the image that have been clicked.

The HTML form tag is the other common document markup that makes use of CGI. The reader of a document provides input and the document returned will reflect that input.

Extensive information is available on writing cgi programs. The details are probably beyond the scope of this class, but we could schedule a special session if some subset of you are interested in learning more.

Access Statistics

So who reads web documents, specifically your documents. Each request to our server is logged. On tsunami this log is kept in the directory /www/htlogs. These logs grow to quite large size (as of this morning the log for the 20 days of May is 3.5 Mb in size), and so at the end of each month the log is closed and compressed and a new log started. Here's a typical entry from tsunami's log:

portage.ocean.washington.edu - - [20/May/1996:12:40:09 -0700] "GET /ots/es/logo3.gif HTTP/1.0" 200 2392

It shows the machine from which the connection came, the date and time, the particular http request that was fulfilled (generally these are the command GET), the particular file that was delivered, the protocol used, a status code (200 means okay) and the number of bytes transferred.

Note that a single page may require multiple GET instructions over the connections, to retrieve the source for a document and each of the in-line graphics files that it includes.

To summarize statistics I use the program wwwstat which is installed in /usr/local/bin on tsunami. There are many options for using the program which can be found with the command
wwwstat -h
Because of the size of the log files wwwstat puts a heavy load on tsunami and should only be run at night. But because it is automatically run, you may not need to run it yourself unless you have a special requirement. We can link to the latest log to examine the nature of the summary that is generated.

Ocean 549 Home

Oceanography 549 Pages
Russ McDuff (mcduff@ocean.washington.edu)
Copyright (©) 1996 University of Washington; Copyright Notice
Last Updated 5/29/96