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.

Internal Image Map Support

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.

1. Create An Image.

   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.

2. Create An Image map map File.

   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

   method is one of the following:

   default - For the default URL

   Coordinates: none

   circle - For a circle

   Coordinates: center edgepoint

   poly - For a polygon of at most 100 vertices

   Coordinates: Each coordinate is a vertex.

   rect - For a rectangle

   Coordinates: upper-left lower-right

   point - For closest to a point

   Coordinate: thePoint

   URL is one of the following:

   A Local URL

   ex. /docs/tutorials

   A Full URL

   ex. HTTP://www.yahoo.com/

   coord#

   Each coord entry is a coordinate, format x,y. The number depends on the method.

   Notes:

   • each method is evaluated in the order it is placed in the configuration file. If you have overlapping areas, such as a circle inside of a rectangle, you should place whichever one you want evaluated first before the other in the map file. In this case, we would put the circle before the rectangle.
   • Also note that it does not make sense to use the default method with the point method because if even one point method is specified, anywhere you click will be considered close to the point and the URL specified by point will be serviced.

   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 0,0 (x,y of the upper-left corner, in pixels) and 99,69 (lower-right corner) corresponds to our local URL HTTP://www.megaton.com/index.shtml.

   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.

3. Referencing Your Image map In Your HTML File.

   To reference your new map, you construct URLs pointing to it.

   For example, you have created a sample.map file in the directory called mapfiles in your home directory, and used the image sample.gif for the map, the following line of HTML will reference it:

   <A HREF="/mapfiles/sample.map">
   <IMG SRC="/gifs/sample.gif" ISMAP>
   </A>
   

4. Add The Server-Side Directives For Accessing Your ImageMap.

   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.

5. Try It Out!

   Load the HTML file, look at the inlined image, click somewhere, and see what happens.

Back to the Index