Back to PPS1 course ; Back to PPS2 Section 6; Back to PPS2 technology page ; Back to JM-R homepage

Clickable maps (aka Imagemaps)

Some of this material is Birkbeck-specific.The principles apply but you need to check exact details of your own server.

Example:


http://www.cryst.bbk.ac.uk/~ubcg09j/pps/mapstuff/jexam2.html aka Fred's world

Fact: To produce a clickable map you need not only a picture, but also a map file, which contains a list of the sensitive regions of the picture and what to do with them (usually a URL to open).

 First, acknowledgments :

Peter Murray-Rust, whose material I have adapted, and who burnt midnight oil to make my first map work for me.

Alan Mills for nagging me to write it down.

Some other info sources. Thomas Boutell's WWW FAQ for pointing to the mapedit program. (Update Mar 96...Thomas Boutell's homepage has the latest version of mapedit. There is a lot more good stuff in the FAQ about maps and other technology.

The mapedit manual and other info.
N.B. There are LOTS of imagemap tutorials out there.
Some of the following links are are a bit old,(Mar 96)and may not all work. Other are new, and contain details of more recent developments, such as client-side imagemaps.
If you discover a site you specially like, please E-mail it to me, and we can include it here.
Try these for starters ;-)
1- 2- 3- 4- 5- 6- 7- 8.

Sections in this document:

Why make clickable maps?

What happens when you browse a clickable map

Making the map file

To be able to use your .conf and .gif files

What the files really look like

A small example

Why make clickable maps?

Because they are a good way of displaying increasing degrees of complexity e.g. the cell structure stuff on the course.

Because they provide a pictorial way of organising information so that you can find the relevant parts quickly, like the clickable UK map at UC Dept of Computer Science.

What happens when you browse a clickable map

From the WWW FAQ: "Creating imagemaps requires a real web server (not an FTP server) and a cooperative web server administrator."

Thanks to Peter M-R for allowing me to adapt his text for this section.

N.B.This section describes what happens on an NCSA server. The recipes later on are for an CERN server, since that is what we are running in the Birkbeck Crystallography Dept.

Step 1. Click on part of the map. The client knows it's an imagemap, because the HTML has ISMAP keyword in the < IMG ... > tag. Your client has to work out the coordinates of the click and encode them in a URL,

e.g. if you click at 20,30 the URL might be something like :

http://www.bbk.somewhere /cgi-bin/imagemap/mymap?20,30

So we have the coordinates appended to a URL [N.B. This URL is an instruction to run the program imagemap (see below) - the cgi-bin and ? are clues].

The "mymap" comes from the HTML, and tells the server the name of the map file.

the HTML looks something like this:

< a href="http://eday.cryst.bbk.ac.uk:8079/cgi-bin/imagemap/mymap">

< img src="mymap.gif" ISMAP> < /A>

Note the ISMAP tag in

< img src="mymap.gif" ISMAP>

Step 2. The server decodes the URL. It finds the name of the .map file(mymap) and the coordinates (20,30).

Step 3.The server starts imagemap, a program in $SERVERROOT/cgi-bin, and passes it the map name and the coordinates.

[This might, on some servers, be in something like /htbin. So long as your Webmaster has all this fixed you don't need to know]

Step 4. imagemap locates the map file by reading a file imagemap.conf, which manages all the map files for that server, and contains a list of .map file names.

You have to be root to edit imagemap.conf . This is the bit where you need the Webmaster.

Step 5. imagemap finds which area was clicked.

[If you miss all the areas, it will look for a default .html file, usually default.html. This is obligatory with some servers, and good practice anyway.It usually contains a simple message about "you hit the background". Mapedit prompts for its location.]

[Question - why shouldn't the default file include a huge fancy image?!!]

Step 6. Then the URL for the area is passed back to the server.

Step 7. Then the server passes the URL to the client in the format:

Location: URL_returned_by_imagemap

Step 8. The client reacts to Location: and retrieves the URL in normal

fashion.

Making the map file

You start with an image (I use .gif ) on which you will create sensitive regions.

Then you make a .conf file

which defines the sensitive regions on the .gif, and connects them to the URL's........I visualise it as an overlay with the regions marked on it. Regions are usually circles, rectangles or polygons, and they can be anywhere within the bounds of the picture.

These don't have to cover the whole area; conversely they can overlap, with the priorities being determined by the order of regions in the .map file. You need one of these for each image.

A default file is also defined,for when you click somewhere that isn't inside a marked-up area. Normally this is a background, and should be linked to a .html file which includes a small message like "You selected the background"!

How to markup the map

i.e. produce the .conf file. If you use a viewer such as xv it will tell you the coordinates of the cursor and you can type them up. Origin at top left. X to right, Y downwards.For macho types.

Otherwise there are some tools to help with marking up:

mapedit runs on unix machines and pc's, and we have copies of both versions at BBK.

This is not freeware, but educational establishments are only meant to send Thomas Boutell a postcard......

Both will allow you to draw round an area and link this to files or URLs on your system or elsewhere.

The following material leans towards CERN-server instructions, since that is what we are running at Birkbeck.

To be able to use your .conf and .gif files

You make a .gif file.(With a drawing program :-))

You make a .conf file.

If you use the markup tools, there is a choice of server types (CERN or NCSA), and for the www.cryst.bbk... stuff you should choose CERN.

You write some .html which includes a reference to a .gif file with the ISMAP tag:

< img src="mymap.gif" ISMAP>

the HTML looks something like this:

< a href="http://www.cryst.bbk.ac.uk/cgi-bin/htimage/mymap.conf">

< img src="mymap.gif" ISMAP> < /A>

Ask your Webmaster for the proper path for the server you want to use.

What the files really look like

The map files.

The are two slightly different sorts of servers, which need slightly different format map files. [Mapedit can produce either of these]

.conf file for CERN server

default default.html

rect (54,38) (162,63) click1.html

rect (219,10) (251,60) click2.html

.map file for NCSA server

default default.html

rect click1.html 54,38 162,63

rect click2.html 219,10 251,60

imagemap.conf (NCSA only)

mymap :/d/user1/ubcg09j/httpd/htdocs/judith/sigtrans/mymap.map

A small example:

The clickable map

The .html

The .gif with the areas marked by mapedit

Here is a picture of the mapedit screen.

(you can also get to this from the map URL)

The .conf file

Here is the .conf file.

Last update 13 March, 1996
Judith Murray-Rust

E-mail: ubcg09j@mail.cryst.bbk.ac.uk

Back to PPS1 course ; Back to PPS2 Section 6; Back to PPS2 technology page Back to JM-R homepage