A Simple Clickable Image

As of version 1.07 the WN server has built in support for clickable images. You no longer need to compile and use the "imagemap" C program. This page illustrates the new WN functionality with two examples. If you want to set up your own imagemaps you should read the "chapter on clickable images" from the WN User's guide.

Imagemap example

Here is a very simple sample of the WN clickable image capability. Click in the box with the picture above and the server will produce a response indicating in which area you clicked.

In order to create such a clickable image you must create a file called a "map file" telling the server which co-ordinates in the image correspond to which document. The format of this file is the same as that used with the NCSA imagemap program (with a few minor enhancements).

The map file shape.map.

The map file for this example contains the following.
###############################################
# Sample image map file for the WN server
###############################################


# This is the default URL used if none of the others are matched.
default	shape.html?background

# Use this instead to have the client do nothing in the default case
#default     <null>

# This is the  URL returned to non-graphical browsers
nocoords	shape.html?nocoords

# A rectangle: the coordinates are upper left corner and lower right corner
rect	shape.html?rectangle	27,90 132,142

# Circle: the coordinates are the center and a point on the circle
circle	shape.html?circle	 62,45 98,45

# Arbitrary polygon: The coordinates are the vertices
poly	shape.html?polygon   146,26 172,26 192,60 192,26 214,26 197,115 147,88

In this example all the URL's refer to the file shape.html with a different "query" (the stuff after the ?). Then WN's conditional text gives a different response for each request. In real life each of the URL's would probably refer to a different document.

In general these can be arbitrary URLs in one of three formats: Either full, as in http://webhost/docs/shape.html  or local as in /docs/shape.html  or relative as in shape.html  This last form is not supported by other imagemap handlers, so should not be used if you plan to move your work to a non-WN system. It refers to a document in the same directory as the map file. The index file entries for this example are

File=shape.gif

File=shape.html
Attribute=parse

File=shape.map
Attribute=imagemap

A Simple Example Using the Point Method

Click in the box with the dots above and a response will tell you the color of the dot closest to the point where you clicked.

The map file points.map

The map file for this example contains
# Sample image map file for the WN server (using point method)

# There is no default when the point method is used -- closest point wins.

# Red points -- coordinates for each point which refers to this URL.
point	points.html?red	44,15 179,40 109,115

# Green points
point	points.html?green 29,65 129,10 174,110

# Yellow points
point   points.html?yellow	35,115 94,55 204,85

The index file entries for this example are

File=points.gif

File=points.html
Attribute=parse

File=points.map
Attribute=imagemap

Of course you can use the point method and the shape methods in the same map file. When you do this the point method acts like a default. That is, if any of the methods "rect", "circle", or "poly" succeed the URL corresponding to the first to do so will be returned. Otherwise the URL corresponding to the closest point to the click location will be returned.


John Franks