Click here to visit our Sponsor

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://
    Each coord entry is a coordinate, format x,y. The number depends on the method.


    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://

    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 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/">
    <IMG SRC="/gifs/sample.gif" ISMAP>
  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