CGI Program: imagemap
Purpose
An imagemap allows you to divide images into clickable regions for
easy navigation. You decide which URL should be displayed for each
portion of the image, and that information is stored in the imagemap.
There are three ways to implement imagemaps in your web documents.
- client-side
imagemaps
- This is the best method because all map processing is done by the
browser (Netscape, Explorer, Lynx), making it fast and efficient, but
some older browsers do not support this feature (Netscape 1.1, Lynx
2.3). Another advantage to using client-side imagemaps is that the
browser displays the destination URL as the user passes the mouse over
the image. All the necessary information can be stored in your web
document so you don't need to keep track of separate map files.
- server-parsed
imagemaps
- The Apache httpd web server supports imagemap processing.
- imagemap CGI
- The imagemap CGI program installed on the Columbia web server is
described below. This is not as fast as client-side imagemaps because
it requires an additional server request, which runs the CGI program
to decode the imagemap reference. This method has been around for a
long time, and many of our imagemaps still use the imagemap CGI
program. The Columbia home page uses client-side imagemaps, but also
includes pointers to the imagemap CGI for those older browsers that
don't support client-side imagemaps.
Description
This program translates a mouse click on an image into the
corresponding URL. Imagemaps allow users to access different
documents by clicking on various parts of an image. Many tools are
available to assist in creating an imagemap. Two popular examples
are:
- mapedit
- Avalable for UNIX, Windows, and Macintosh environments. Set your
DISPLAY variable and then type "mapedit" on CUNIX to run it. It
contains extensive built-in documentation, and it can be used to
create client-side imagemaps as well. Download info.
- webmap
- for the Macintosh.
Or you can create the file manually after getting the desired
coordinates of your image using xv or Photoshop. For those URLs that
are on the www.columbia.edu web server you can leave out the host name
from the URLs to get a slightly faster response from the server, since
that is the default. You must include the directory and filename.
Here is a sample map file
default noop
rect /~mrz1/test1.html 62,47 129,148
rect /~mrz1/test2.html 172,43 234,122
AcIS has modified the imagemap program so that users can create
sensitive maps without the help of a systems administrator. The
following summary describes those things that are different from what
is described in the documentation referenced above, as well as other
points to keep in mind.
noop
Use the special "noop" URL in the map file to indicate that no action
should be taken when the user clicks there. No error message will be
displayed, and the map will not be reloaded.
self-install
You do not need access to the conf/imagemap.conf
file.
map file must be specified
The full path of the map file is specified as part of the request.
- can use "~"
- If the path starts with "~" it refers to a user's public_html
directory. So
~abc1 refers to
~abc1/public_html. To specify the mymap.map
file in the public_html directory belonging to user abc1, use this
syntax
<a href="/cgi-bin/imagemap/path=~abc123/mymap.map"> ...
</a>
- old syntax supported
- If the path starts with "/" it represents an absolute path, and is
interpreted literally. In that case you must include public_html as
part of the path to the map file if that's where the map file is
located. If the home directory for user abc1 is
/k/u1/a/abc1, you can get the same effect using this
syntax
<a
href="/cgi-bin/imagemap/path=/k/u1/a/abc1/public_html/mymap.map">
... </a>
set protection
Don't forget to make the map file world-readable.
image file
The image file is referenced by URL, not by path. Therefore, if
you are referencing your own image file, it must be in your
public_html directory and be world-readable. The <img> tag goes
between the <a> and </a> tags, and it must include the
ISMAP attribute.
<a href="/cgi-bin/imagemap/path=~abc1/mymap.map">
<img src=http://www.columbia.edu/~abc1/mymap.gif ISMAP></a>
