CS2020:   Web Science, Sytems and Design
Instructor Outline Syllabus Projects Links  

Image Maps

  • is an image that has regions in it that serve as "hot spots".
  • when you click with your mouse on a "hot spot" it will link you to another site.
  • useful for web-design when you want portions of an image to serve as navigational features in the page.




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:
  • Fortunately, there are tools such as MapEdit and MapThis that will automatically construct a server side Image Map for you and generate the special map file.
  • Now you must transfer not only the image contained in the web-file but, also the corresponding special map file to the server.
  • If you have a web-page containing a Server-Side Image Map and this web-page, image and map file are on a local machine (e.g. on a diskette) and not on the server then when you view it and try to use the image map....it will not work properly as there is no special server program on your local machine to handle the mouse clicks. Try it out...it will simply pop up the map file each time you click on it. Hence, you must have the web-site on a server for a Server-Side Image Map to work properly



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: 

  •  <MAP name="x">  and a </MAP>  tags

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