Image Maps





Two Kinds of Image Maps

Image Maps work basically by tying regions of an image to hypertext links. However, there are two ways in which this can be accomplished in a web-page. They are:
  1. Server-Side image maps
  2. Client-Side image maps









Server-Side Image Maps

These are implemented using an image displayed by the client and a program that runs on the server. The Steps:
  1. First browser loads page with an image map on it.
  2. Then user clicks with mouse on some region in the image map.
  3. This calls a special program on the web server and the client machine also sends the location of where the mouse clicked.
  4. This special program looks up inside of a special map file that matches regions to links and finds the link it should follow. This server program returns the link reference to the browser.

Needed: What is needed is the image, a special map file and someway of telling the browser in HTML that the image is an Image Map so it can respond to clicks as described above.

Example with Map File
Map File
default http://www.monterey.edu/academic/faculty/grewe
#my dogs hearing
poly ear.html 22,58 79,51 51,103 
#dogs nose
circle http://www.monterey.edu/academic/faculty/grewe/nose.html 90,179 100,202 

  
How to include Server Side Image Map in a web page
 < a href="map_file.map" > <img src="image_file.gif" ISMAP > < /a >
In the case above we are using a gif image...but, this is not necessarily a requirement.

NOTE:



Client-Side Image Maps

In this case all of the work is done by the client side. The concepts of having hotspots and tying them to links is the same as in the Server-Side Image Maps. The details of how you represent this information is different.

In the client side, the mapping information is present in the web-page itself and a separate map file is not created. All of this information is inside of a:


This code can fortunately be constructed automatically using a program such as MapThis and then simply inserted into your html file.

You also need to add the following line to your html file wherever you want your image map to appear:

 <img src="image_file.gif" USEMAP="#x" > < /a >
where x is the name in the MAP tag above!
© Lynne Grewe