College of Engineering Logo Web Server Logs Student Server Logs Orange bar Main Page General Information Special Events Programs Research Student Information Computer Facility Outreach Xtreme Engineering Jobs Available

Image Maps

Image maps provide a neat way for people reading your pages to find their way around your pages. A familiar example of interactive maps are the Holmes Hall floor maps available on the College of Engineering Server. Most Web servers have some script which allows users to serve maps. The imagemap script was written by the folks who wrote the NCSA HTTPd. Our server uses a customized version of the same program, called "imap" has a few additional features, which will be explained below.

A new development in image maps is what is called Client-Side Image Maps. More information on this is available at the link. For this case, the client does the image map processing. Obviously, you will require a client which supports these new HTML tags. Of these, the most popular is Netscape Navigator 2.0.

Making a Clickable Map

In order to set up an interactive map in one of your pages, follow these steps:

  1. Create a .gif (or .jpeg) file with the image to be used for the clickable map.
  2. Create the map definition file for specifying the areas on the map corresponding to URLs.
  3. Insert HTML code into to refer to the map.

The Map Definition File

The maps are defined by the map definition file which is a plain text file containing the coordinates for different areas which point their corresonding URLs. (The mapedit program by Thomas Boutell is available on our workstations to aid in the creation of this map file.) Our server automatically detects any file ending in .map as an imagemap definition file. If you would like to manually edit your map definition files, read the following details. Lines in the map definition file can have one of the following three formats:

# this is a comment
method URL coords coords [coords ...]
default URL

The first example shows a comment line. Blank lines are also ignored. The second example gives the URL for a given method. The four valid methods used by imap are circle for circles, poly for polygons, rect for rectangles, and point for "nearest-point" matches. The last example defines a URL for the default location. The default URL is used if the user selects a location which not defined by the lines in the configuration file, and is typically required for all maps.

Methods

The four methods are described below:

circle
This method requires two coordinates: The first indicates the center of the circle, and the second coordinate indicates a point on the edge of the circle.
points
This method is followed by the coordinates of a single point. When using this method, the nearest of several points specified is used.
poly
This method is followed by the coordinates of the vertices of the polygon. ote>

Author: Ben Yoshino (ben@wiliki.eng.hawaii.edu)

Comments, Questions? | E-mail: webmaster@wiliki.eng.hawaii.edu


Last updated on Monday, February 05, 2001
Copyright © 2001 University of Hawai`i, College of Engineering, Computer Facility
All rights reserved.