Client Side and Server Side Imagemaps

Last Updated: November 16, 1996 Server side imagemaps are one of the simplest forms of CGI's. A server side imagemap is an image with a hypertext anchor that points to a gateway program that can process the image and coordinate data. A client side imagemap links an image with the same type of coordinate data, however the client (or browser) processes the information without contacting the server. Since not all browsers support client side imagemaps, it is usually best to present your image linked with capability of both server side and client side image mapping.

Setting up an image map in this manner done in 3 easy steps:

1. Create an image
2. Create a map file(s)
3. Link the image to the map file(s)

Create Image

A sample image: navigation bar

Create Map

A sample image with delimited rectangular regions

Server Maps
Regions of an image are specified using circles, rectangles, polygons, and points. A default action must also exist in the server map file. If the client clicks in any area that does not fall inside one of the mapped regions, the default URL is issued.

The general form for server map file entry is:

        method    URL    x1,y1  x2,y2  x3,y3 ... xn,yn

        default   URL
        circle    URL   center edgepoint
        rect      URL   upper_left_corner lower_right_corner
        poly      URL   x1,y1  x2,y2  x3,y3 ... xn,yn
        point     URL   x,y

        #         comment

A sample server side imagemap file is shown below:

Client Maps
As with server maps, regions of an image are specified using circles, rectangles, and polygons specified in pixel coordinates from the upper left-hand corner of the image.

The general form for client map attribute is:

   <map name="tagstring">
     <area shape="rect"    coords="x1,y1, x2,y2" href="region_url">
     <area shape="circle"  coords="x1,y1, r"      href="region_url">
     <area shape="polygon" coords="x1,y1, x2,y2 ... xn,yn" href="region_url">
     ..... more regions ...
   </map>
    

A sample client side imagemap file is shown below:

Generating a map file is not difficult and requires only patience, concentration, and an image viewing program to extract pixel coordinates. Of course, building an image map would be much easier if access to some graphical tool were available. Fortunately, such tools are available. Map This is a comprehensive freeware graphical tool that provides a clean, easy-to-use interface. Map This is only avaialble for Windows operating systems. Mapedit by Thomas Boutell is a shareware graphical tool that seamlessly constructs maps for images. Mapedit is available for both UNIX and PCs running Windows. More information about Map This and Mapedit can be found at the following URL:

Mapedit
http://www.boutell.com/mapedit/

Link Image to Map

      <a href = "/cgi-bin/imagemap/path/file.map">
      <img border=0 src="sampleimg.gif" ismap></a>
    

Linking to Client Side Maps
An example of the HTML markup to make an image with a client side image map is given below:

       <map name="samplemap">
         <area shape=rect coords="22,18 84,92" 
               href="/cgi/library/imagemap/sample_home.html">
         <area shape=rect coords="84,18 136,92" 
               href="/cgi/library/imagemap/sample_news.html">
         <area shape=rect coords="136,18 184,92" 
               href="/cgi/library/imagemap/sample_mail.html">
         <area shape=rect coords="184,18 251,92" 
               href="/cgi/library/imagemap/sample_calendar.html">
         <area shape=rect coords="251,18 307,92" 
               href="/cgi/library/imagemap/sample_bulletin.html">
         <area shape=rect coords="307,18 359,92" 
               href="/cgi/library/imagemap/sample_stats.html">
       </map>
      <img border=0 src="sampleimg.gif" USEMAP="#samplemap"></a>
    

Combining Server Side and Client Side Maps
Since not all browsers support client side imagemaps, it is wise to use both the "ismap" and "usemap" attributes in the image attribute. For example:

       <map name="samplemap">
         <area shape=rect coords="22,18 84,92" 
               href="/cgi/library/imagemap/sample_home.html">
         <area shape=rect coords="84,18 136,92" 
               href="/cgi/library/imagemap/sample_news.html">
         <area shape=rect coords="136,18 184,92" 
               href="/cgi/library/imagemap/sample_mail.html">
         <area shape=rect coords="184,18 251,92" 
               href="/cgi/library/imagemap/sample_calendar.html">
         <area shape=rect coords="251,18 307,92" 
               href="/cgi/library/imagemap/sample_bulletin.html">
         <area shape=rect coords="307,18 359,92" 
               href="/cgi/library/imagemap/sample_stats.html">
       </map>
      <a href = "/cgi-bin/imagemap/path/file.map">
      <img border=0 src="sampleimg.gif" USEMAP="#samplemap" ismap></a>
    

The sample image shown below is anchored to a server side map file (go ahead and test it).

A sample image anchored to both server and client side map files

For a more thorough presentation of server side Imagemaps, the inquistive CGI student is referred to the NCSA Imagemap Tutorial at the following URL:

http://hoohoo.ncsa.uiuc.edu/docs/setup/admin/Imagemap.html

For a more thorough presentation of client side Imagemaps, the inquistive CGI student is referred to the Spyglass Imagemap Tutorial at the following URL:

http://www.spyglass.com/techspec/tutorial/img_maps.html