IMAGE MAPS AND SENSITIVE IMAGES

You can produce sensitive or clickable images on your pages in two ways. First we will describe the original method using server-side maps and then the newer client-side method. Server-side maps have the mapping information in a separate file on the server which the server handles. Client-side image maps include the mapping information within the original page for handling by the browser. Client-side maps reduce network traffic, improve response time for the user, and allow better handling by browsers (including some text-only browsers). Server-side maps are still more universally supported (particularly by older browsers) and may be more appropriate with very large maps. For now, using both forms provides the benefits of the client-side method and compatibility with older browsers. Most newer browsers, including recent versions of Netscape Navigator, will use the client-side map if both are available.

Server-Side Maps

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="sample.map">
  <img src="sample.gif" alt="alt text" ismap>
  </a>

This refers to an image file called "sample.gif" and is associated with "sample.map" for the sensitive area definitions.

The map file is simply a text file in this format (known as the NCSA format):

  default http://www.uky.edu/whatever
  rect http://www.uky.edu/whateverelse 1,1 10,10

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 setting this up. 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 and some can produce the map file or HTML directly. Some web browsers display the coördinates of the cursor within images that are link anchors.

Here's an example of a server-side map:

Additional directives are supported in map files. Consult the Apache documentation for more inforamation.

Client-Side Maps

Client-side maps have more complex HTML, but don't require a separate map file. Within the HTML file you first define the map:

  <map name="sample">
  <area shape=rect coords="1,1,10,10" href="wherever" alt="description">
  </map>

The information included is much like that used in the server-side map file. This is then referred to later in the file:

  <img src="imagemaps.gif" usemap="#sample">

Some browsers allow the usemap parameter to refer to another file.

Here's the image again, this time with a client-side map:

The Universal Example

Here's the same image one more time, this time with both server-side and client-side maps defined:

These notes reflect the Apache web server. The old instructions for the CERN server are still available for reference purposes.

This page was last updated on 2003-07-18. Please direct questions and comments regarding this page to webmaster@www.uky.edu.