Server Side Image Maps
Server side image maps have largely been replaced by client side image maps. This page is in place for legacy code. Unless you have a specific reason to avoid them, you should always use client side image maps. Consult a good html reference for additional documentation.
Our server can handle image map queries without launching an external image map cgi script. This provides for faster delivery of image map links.
This section will walk through the steps needed to get a basic image map up and running.
There are a number of image creation and editing programs that will work nicely, it shouldn't be hard to find one for your specific computer.
This file maps regions to URLs for the given image. For a list of tools that may help you create a map file, see Yahoo's Image map Directory. For instance, there is a program called mapedit that you could use.
A common scheme for an image map is a collection of points, polygons, rectangles and circles, each containing a short text description of some piece of information or some information server; interconnections are conveyed through lines or arcs. Try to keep the individual items in the map spaced out far enough so a user will clearly know what he or she is clicking on.
Lines beginning with # are comments. Every other non-blank line consists of the following:
method URL coord1 coord2 ... coordn
Here is what a map file looks like:
default /index.shtml rect /services.shtml 0,0 99,69 rect /rates.shtml 100,0 199,69 rect /index.shtml 200,0 299,69 rect /demos.shtml 300,0 399,69 rect /contact.shtml 400,0 499,69 rect /control.shtml 0,70 499,129
The format is fairly straightforward. The first line specifies the default response (the file to be returned if the region of the image in which the user clicks doesn't correspond to anything).
Subsequent lines specify rectangles in the image that correspond to arbitrary
URLs -- for the first of these lines, the rectangle specified by
x,y of the upper-left corner, in pixels) and
99,69 (lower-right corner) corresponds to our local URL
So, what you need to do is find the upper-left and lower-right corners of a rectangle for each information resource in your image map.
It doesn't matter what you name your map file.
To reference your new map, you construct URLs pointing to it.
For example, you have created a
sample.map file in the directory
mapfiles in your home directory, and used the image
sample.gif for the map, the following line of HTML will reference
<A HREF="/mapfiles/sample.map"> <IMG SRC="/gifs/sample.gif" ISMAP> </A>
Create a file, in a simple text editor (Notepad for Microsoft Windows, or SimpleText for Macintosh will work), called ".htaccess" (no quotes). This file contain the following lines:
----------------- COPY BELOW ----------------- AddHandler imap-file map ImapDefault index.shtml ImapMenu formatted ----------------- COPY ABOVE -----------------
Save this file, in ASCII text format, and upload this to your /htdocs directory, when you upload your image, and your map file.
Load the HTML file, look at the inlined image, click somewhere, and see what happens.
Back to the Index