University of Kentucky, Lexington
Image Maps and Sensitive Images

These notes are for the old CERN server now being replaced. See the new instructions for information reflecting the new server.

You can produce sensitive or clickable images on your pages. This will involve an HTML file that will reference a GIF image file as an embedded image. An additional text file will contain information that maps areas of the image to Web links. For example, consider this fragment of an HTML file:

  <a href="/htbin/htimage/path/sample.map">
  <img src="sample.gif" ismap>
  </a>
This refers to an image file called "sample.gif" and is associated with "sample.map" for the sensitive area definitions. The "/path/" part is necessary here and will use the path information we work out for your URL. For testing you can use the ~userid form (/htbin/htimage/~userid/sample.map).

We are running the CERN HTTP server and the map file is simply a text file in this format:

  default http://www.uky.edu/whatever
  rect (10,20) (100,100) http://www.uky.edu/whatever
The "rect" line defines a selectable rectangle by giving two diagonally opposite corners. The units are pixels. When a point within the rectangle is selected the given URL is used. The "default" line defines a URL to be used if the point selected isn't defined otherwise. Circular and polygonal areas are also supported. Determining the pixel coördinates for the selectable areas can be the most time consuming part of this. There are utilities for some platforms (like Webmap and Pagemill for the Mac) that can automate this, but most image editing programs (Photoshop, for example) can give you exact pixel addresses in an image. Even some Web browsers display the coördinates of the cursor within images that are link anchors.

The recent versions of Netscape Navigator and other browsers support client-side image maps which includes the mapping information within the original page using map and area HTML tags and the usemap parm of the img tag. Client-side maps have many advantages (reduced network traffic, improved response time for the user, better handling by browsers, including text-only browsers), but are not yet universally supported so using both forms provides the benefits of the client-side method and compatibility with older browsers.

Last updated 17 January 1997.


UK Home Page Providers Info