All about imagemaps

Although you can use a program such as MapThis for Windows to create your imagemaps, as with the rest of your HTML pages, it helps to understand what's happening when you create a map file and just how it works.

There are a couple of important things to remember when you're creating a map. The first is to try and make sure that clickable areas are clearly defined, so that people who look at your pages won't be confused about where to click, and the second is to remember that the order in which your hot spots is defined is important.

When the imagemapping program tries to work out what should happen next, it stops at the first hotspot that it finds. That's not a problem if none of them overlap, but on the example page that we've show, there's a circle within a rectangle, and it won't work unless you define the circle first. The rectangle will automatically fit round it.

It's also worth remembering that, though there are differences between the formats of the map files used by the CERN and NCSA web servers, you can make it easier to convert between them. The most important thing to remember is that when you define a rectangle, you should always use the top left and bottom right corners as your points. Strictly speaking, you don't have to do that for the CERN web server, but if you do you won't have as much work to do should you ever use the NCSA one instead.

Another point to remember when you work out the co-ordinates is that, unlike an ordinary graph, co-ordinates in an image start with 0,0 in the top left corner, rather than the bottom left. Each co-ordinate is a single pixel, so if you use a graphics package to create the picture, the pixel address will be the same as the co-ordinate.

To make it a little clearer, let's look at a sample image, which is 288 pixels wide and 144 high.

We'll assume that there are four options when you click on the image, one for each of the named areas and a file called 'index.html' that will appear if you click on any of the white space around the edge. Here's what the image map file would look like for a web server using the NCSA daemon

default http//www.stonewall.demon.co.uk/index.html
circle http//www.stonewall.demon.co.uk/a.html 55,50 55,88
rect http//www.stonewall.demon.co.uk/b.html 159,55 239,144
rect http//www.stonewall.demon.co.uk/c.html 9,11 276,90

You can use either tab or space characters to separate the different parts of each line. This is what the same definition would look like if you were using a CERN web server

default http//www.stonewall.demon.co.uk/index.html
circle (55,50) 38 http//www.stonewall.demon.co.uk/a.html
rectangle (159,55) (239.144) http//www.stonewall.demon.co.uk/b.html
rectangle (9.11) (276,90) http//www.stonewall.demon.co.uk/c.html

On the next screen, you can see a walkthrough creating an map file with MapThis.