C & G web

Server-side Imagemaps

A server-side imagemap is one in which the browser sends the server x, y coordinates of the imagemap. The server then translates the coordinates into a URL and returns the URL to the browser. This type of imagemap is dependent on the vistor being online. Hence, it will not work if used offline.

Server-side imagemaps work with all browsers but your server must be running an imagemap program.

You are not required to create a server-side imagemap for this module. The information below will give you a theoretical understanding of them and an appreciation of why they are not often used.

Creating the Server-side Imagemap

There are four steps involved:
  1. Prepare an image of type GIF or JPEG. There is nothing special about this file, it is simply a normal image.
  2. Decide which area of the image will link to which URL. And decide whether the shape of each area will be a rectangle, a circle, or a polygon.
  3. Create a map file. This file defines each link within the image.
  4. Add a hypertext link to the image to tell the browser to call the map file when the image is clicked.

Server-side imagemap

Making a Map File

The map file is a simple text file which describes the x and y pixel coordinates of each link on your image. Each line in the file defines one link.

Map filenames must always end with the extension .map, for example, fish.map. The map file must be stored in the same directory as the HTML file that calls it.

Just like a client-side map, the file must define hotspots and the URLs that they link to.
For example:

rect tail.html 1, 35, 45, 118

The exact syntax of defining hotspots may vary slightly depending on which imagemap program your server is using. Your service provider should provide you with this information.

How to use a server-side Imagemap
You must add a hyperlink tag to the image that identifies the name and location of the imagemap program on the server, and the name of the map file. For example:

<html>

<head>
</head>

<body>

<a href="/cgi-bin/imagemap/fish.map">

<img src="fish.gif" width="374" height="164" ISMAP>

</a>

</body>

The imagemap program is in a folder called /cgi-bin and the imagemap program is called imagemap. The map file is fish.map. The command ISMAP tells the browser that this image should be treated as an imagemap.

Again there can be differences between servers. The code above works with NCSA and most other servers. If your pages are on a Netscape server, the code is different and the link would read like this:

<a href="fish.map">

...rather than...

<a href="cgi-bin/imagemap/fish.map">

Netscape doesn't need to be told where the imagemap program is or what it is called.

Previous page...

Back to Top of Page

Computeach International Ltd

Christopher Ward London Limited

Christopher Ward London Limited