Creating and Using Image Maps

Image maps create a point-and-click image where specified areas link to specific pages, or URLs. Because image maps only function within a graphical browser, a text-only version of a web presentation must be included to allow non-graphical users the opportunity to access the information as well. Most text-only browsers will not even indicate that an image map is present on the page, effectively locking the user out of your presentation.

Server-Side Image Maps

The first type of image map used on the web was the server-side image map. This requires either a server with internal image map capabilities, or a CGI script for handling image maps set up on the server.

The three parts of a server-side image map are:

graphic file in .GIF format
map file defining the specific link areas
CGI script or server with internal image map processing

Images used for image maps should be made up of clearly defined areas which make it easy for the user to distinguish between each clickable area, and be presented such that it is obvious that the image provides links to other pages. Although JPEG imagfes can be used, .GIF format images for maps allows use of programs designed to aid in creating a map file.

The map file contains the definitions of each link area on the image map. The NCSA standard for maps files (the most common) is:

Lines beginning with # are comments. Every other non-blank line consists of the following:

method URL coord1 coord2 ... coordn

method is one of the following:

default - the default URL
Coordinates: none
circle - a circle
Coordinates: center edgepoint
poly - a polygon of at most 100 vertices
Coordinates: Each coordinate is a vertex.
rect - a rectangle
Coordinates: upper-left lower-right
point - closest to a point
Coordinate: thePoint
URL is one of the following:

A Local URL
ie. ../session8/index.html
A Full URL
ie. http://www.altavista.com/
coord#: Each coord entry is a coordinate, syntax x,y. The number of coordinates depends on the method.

Map File Notes:

Each method is evaluated in the order it is placed in the map file. Overlapping areas, such as a circle inside of a rectangle, should be placed in whichever order you want them evaluated. Placing the circle first in the map file would mean that the smaller area (circle) would be evaluated before the rectangle. Placing them the other way around would mean that the circle would never be selected.
Although it will still function the default method should not be used with the point method because anywhere you click will be considered close to the point and the URL specified by point will be accessed rather than the default.
When linking to access authentication-protected documents through an imagemap, you MUST use fully qualified URLs rather than relative URLs, for example
http://your.server.com/path/to/protected/file.html
otherwise access will be denied.

Sample map file:

Map files may have any name, though they traditionally have a .map extension to make them easily distinguisable from other file types. Map files will fail if they are placed in the root directory on the server, so make sure they are in a subdirectory. It is not uncommon to have a directory set up specifically for map files.

To enable the image map in your HTML document, create a link around the image tag and include the ISMAP attribute for the image. The link points to the CGI script for map processing combined with the location of the map file. For example:

If the server has internal image processing enabled, the URL only has to point to the map file, without reference to a CGI script. For example:

Client-Side Image Maps

Client-side image maps are newer and have overcome the problems of "anonymous" links, inability to test locally, and slow response times presented by server-side image maps. The principle of client-side maps is the same as for server-side, but all of the processing takes place inside the browser, rather than relying on the server to process the map coordinates in order to determine where the link is supposed to go.

Since the browser is essentially the CGI script for map processing, you only need to create the map definitions, which are embedded inside the HTML document, rather than saved in a separate file on the server, and the image which forms the visual map.

The map definition is setup using the

<MAP>...</MAP> tags which contain AREA tags. Use the following syntax:

Map tags:
<MAP NAME="mapname"> area tags </MAP>
Area Tag (polygon):
<AREA SHAPE="POLY" COORDS="x1,y1,x2,y2,x3,y3,...,xn,yn" HREF="URL" [TARGET="window-name"]>
Area Tag (rectangle):
<AREA SHAPE="RECT" COORDS="x1,y1,x2,y2" HREF="URL" [TARGET="window-name"]>
Area Tag (circle):
<AREA SHAPE="CIRCLE" COORDS="x,y,radius" HREF="URL" [TARGET="window-name"]>

Sample client-side map definition:

To implement the client-side image map, add the USEMAP attribute to the IMG tag identifying the MAP name as follows:

In order to facilitate browsers that do not support client-side image mapping, you can include both server and client-side image map definitions for the same image as follows:

The client-side map will take precedence over the server-side map.