How do I make server-side imagemaps?
To make server-side imagemaps, you need to use a program like Photoshop, xv, GraphicConverter, or PaintShop Pro to determine the coordinates (in pixels) of the borders of your regions. Then you will need to build an imagemap map file. This is a file that tells the server what regions of the image correspond to what URLs. The file takes the form of entries that describe these regions, and appears in the following format:
method URL coordinatesThe method is the shape of the region to be mapped. The
URL is the page that the region leads to. The
coordinates are x,y coordinates that mark the parts of
the image that delimit the region.
Note: You can use image formats other than GIF (such as JPEG).
There are five different methods:
-
default: This is the URL that is activated when
you click part of the image that is not defined by any other method.
For this reason, coordinates are not used.
-
point: This indicates a single x,y coordinate.
If you have multiple points defined, the URL indicated by the point
closest to where you click will be loaded. Because of the nature of
the point method, it is not compatible with using default as the
method.
-
rect: This is the simplest method. The
coordinatesdefine the x,y of the upper-left corner and the x,y of the lower-right corner, in that order.
-
circle: The
coordinatesfor this method represent the center of the circle and a coordinate on the edge of the circle, in that order.
- poly: This method indicates non-rectangular polygons. Each x,y coordinate is a vertex of the polygon, and you can define up to 100 vertices.
The server evaluates regions based on the order they appeared in the map file. So if you have a region within a region, the smaller region would have to appear first in the map file to be expressed. Thus, an example map file would look like the following:
# Default URL default thispage.html # Triangle in the center poly oops.html 50,50 50,70 70,70 # Circle around triangle circle http://bogus.url.com/~scooby/ 60,60 60,80 # Square around circle rect /loopy/crazy.html 20,20 100,100Note: The lines that have #
(a pound sign) in front of them are comments and are not recognized by
the server.
Once you have your map file created, put it in your web directory
(e.g., /fs/username/www on Mercury) or a
subdirectory of the web directory. There are no restrictions on the
name of the map file.
Once you have the image and map file made, you are ready to incorporate the imagemap into your web page. To do that, use the following format:
<A HREF="http://web.server.address/cgi-bin/imagemap/~username/image.map"> <IMG SRC="imagemap.gif" ISMAP></A>
Replace web.server.address with your web server's hostname
(e.g., mypage.iu.edu), and username with your
username. Replace image.map with the name of your map file, and
replace imagemap.gif with the name of your image.
Note: If your imagemap file is in a subdirectory
of your /fs/username/www directory on Mercury, the URL
would change from .../~username/image.map to
.../~username/directory/image.map , where
directory is the name of the subdirectory.
Last modified on June 23, 2008.







