Using Clickable Images in your Web Pages

Clickable Images allow clients to click on different areas of an image on a web page, and go to different locations, depending on where they clicked. They are very useful for providing spacially oriented, or graphically oriented navigation, at a cost in download time (images usually take longer) and server resources.

To use a clickable image you need to provide the following:

The are several different (in-compatible) mechanisms for supporting clickable imagemaps:

All of these mechanisms use different mapping information, unfortunately. You need to be aware of this when reading documentation about clickable images or imagemaps, as it often deals with only one of the alternatives. ALL of the above mechanisms are supported on our server. Further details on each are provided below.

Using Client-Side Imagemap

Client-side image maps are designed to reduce the load on web servers, and provide better feedback to the user. When using client-side image maps, the mapping information is included in the HTML document along with the map image. The mapping function is done by the client's browser, reducing the load on the server. Not every web browser supports this mechanism, though support is pretty common now.

Unfortunately, the format of the mapping info is different to both the NCSA and CERN format map files (though its contents are equivalent).

<map name="somename">
<area shape="rect" coords="x1,y1,x2,y2" href="URL">
<area shape="circle" coords="x,y,r" href="URL">
<area shape="poly" coords="x1,y1,...,xn,yn" href="URL">
<area shape="default" href="URL">
</map>
An example map info looks like:
<map name="alicemap">
<area shape="rect" coords="88,53, 117,96" href="map_resp2.html">
<area shape="rect" coords="2,2, 86,74" href="map_resp1.html">
<area shape="rect" coords="0,0, 2048, 2048" href="map_def.html">
</map>

A reference to a client-side imagemap looks as follows:

<img src="alice.gif" usemap="#alicemap">

whislt the above is efficient and simple, browsers which don't understand client-side imagemaps will do nothing. A solution which accomodates older browsers is to wrap the above call inside a server-side anchor reference. For example, a reference to a client-side imagemap (with fallback to internal server) looks as follows:

<a href="alice.map"><img src="alice.gif" ismap usemap="#alicemap"></a>

A HTML Tags Cheat Sheet to assist in writing imagemaps may be found here.

Using Internal Server NCSA Map Handler

This uses a version of the NCSA imagemap program that has been incorporated into some web servers, such as the apache server which we use. The mapping information is stored in a NCSA format map file, usually in the same directory as the HTML document using the imagemap (though it doesn't have to be).

The map file is referenced in an Anchor surrounding the IMG SRC tag with the ISMAP option, in the HTML document. For example, if your userid was alice, your image file was called alice.gif, your NCSA format map file was called alice.map, and assuming the image file and the image map reside in your WWW home directory, then a suitable anchor in the HTML file with the clickable image, might be:

<a href="alice.map"><img src="./alice.gif" ismap></a>

Full instructions on writing NCSA style clickable images (for either internal or external server-side use), may be found in the NCSA Imagemap documentation.

NCSA Map File Format

The NCSA Map File is a separate file, with the suffix .map, which may contain any of the following, each on separate lines: Regions are checked in order, the first match found is used, and if no regions match, then the default is used. Circles defined by their bounding rectangle, they may actually be ovals. The URLs referenced in the map file may be either: The URL cannot be relative to the HTML document containing the map, since at the time the mapping is done, the web server is handling the mapping request, not the original HTML document request.

An example NCSA format map file is:

# Example NCSA format map file - comments are allowed
default  /~alice/fumble.html
rect  /~alice/ map_resp1.html 88,53  117,96
rect  /~alice/ map_resp2.html 2,2  86,74

Using External NCSA Imagemap program (depreciated)

The imagemap program was the mechanism originally provided with the NCSA web server. It must be installed by the web administrator in the central cgi-bin directory, before it can be used. Its name on our server is /cgi-bin/imagemap/. For example, if your userid was alice, your image file was called alice.gif, your map (in NCSA map format as described above) was called alice.map and assuming the image file and the image map reside in your WWW home directory, then a suitable anchor in the HTML file with the clickable image, might be:
<a href="/cgi-bin/imagemap/~alice/alice.map"><img src="./alice.gif" ismap></a>
Note that in the anchor you first name the imagemap program, then extend this with the location of the map file, relative to the server root.

Full instructions on writing NCSA style clickable images (for either internal or external server-side use), may be found in the NCSA Imagemap documentation.

Using External CERN HTImage program (depreciated)

htimage is the mechanism provided with the CERN web server (which we used to use). We no longer support this mechanism.

The correct htimage path on our server is /cgi-bin/htimage/. For example, if your userid was alice, your image file was called alice.gif, your map (in CERN map format) was called alice.map and assuming the image file and the image map reside in your WWW home directory, then a suitable anchor in the HTML file with the clickable image, might be:

<a href="/cgi-bin/htimage/~alice/alice.map"><img src="./alice.gif" ismap></a>

Full instructions on writing documents containing clickable images, may be found in the CERN online documentation on HTImage. Note that the information about server configuration is there for server administrators and can be ignored from the point of view of writing clickable documents.

CERN Map File Format

The CERN Map File is a separate file, usually with the suffix .map, which may contain any of the following, each on separate lines: Regions are checked in order, the first match found is used, and if no regions match, then the default is used. Note that no comments are allowed, and circles are strictly circular! The URLs referenced in the map file may be either: The URL cannot be relative to the HTML document containing the map, since at the time the mapping is done, the web server is handling the mapping request, not the original HTML document request.

An example CERN format map file is:

rect (88,53) (117,96)  /~alice/map_resp1.html
rect (2,2) (86,74)  /~alice/map_resp2.html
default  /~alice/fumble.html

Which Method to Use???

Given the range of choices, what should you choose? My recommendations are:

Easiest - include client-side map info in your HTML page. This will only work with client-side imagemap capable browsers (most of them), and has improved feedback to the user and less load on our server.

Simplest Generic - create an NCSA map and use the internal server support. This means you need only create one map file, but at a cost of loading our server on all uses, and less feedback to the user.

Most General - create both client-side and NCSA map info, and use a client-side imagemap with fallback to internal server mapping. This lets client-side imagemap capable browsers use it, with improved feedback to the user and less load on our server; but still supports older browsers via the internal server-side imagemap support when needed. It does mean you must create and maintain 2 distinct copies of the map info.

Some Examples

The map demo document with internal server-side, external server-side, and client-side imagemaps, illustrates the use of these various alternatives. Please examine it.

Creating Map Files

Map files can be created using a text editor, provided you know the coordinates of the regions you want on the image. In general though, it is easier to use a dedicated map editor program which loads the image, and allows you to outline the desired regions on it. Available programs include: See WWW FAQ on Imagemaps for pointers to these programs.

Further Information and Help

PLEASE read the documentation before even THINKING about seeking assistance with image maps! Then read it again. Twice. As this is a more advanced area of web authoring, the help team would appreciate it if you could make an effort to read the documentation and debug any problems yourselves, as far as is possible.

Full instructions on writing NCSA style clickable images (for either internal or external server-side use), may be found in the NCSA Imagemap documentation.

Instructions on writing CERN style clickable images may be found in the CERN online documentation on HTImage.

Instruction on writing client-side imagemaps may be found in the Netscape HTML3 Extensions.

General information on imagemaps is also available from the WWW FAQ on Imagemaps, and the Imagemap Help Page.

Some Final Words

Remember, whilst imagemaps can be nice, some people don't/can't load images, so make sure you have a plain text alternative. Image loading can be slow, since not everyone is on your local LAN, you may need to compromise on: As with most things, use a little common sense in your utilisation of this facility. It will be appreciated.
[User_Info] [Top] [PCUG] [AUUG(Canberra)] [Comment] [Index]
webmaster@tip.net.au / 24 Oct 2006