Maps, also known as sensitive maps or clickable images are a widely used and useful feature of the World Wide Web. Basically a map is an image displayed in such a way that the browser can determine the co-ordinates of a user selected point on the image. The selected point can then be used to take the user to a particular URL associated with that point.
A common and natural use is a geographical map with links to the towns and cities shown on the map. Check the UK Academic Resources Map for a good example. Maps can also be used to provide menu and navigation bars.
All maps involve the presentation of an image within the page seen by the browser. This has a co-ordinate system starting at x=0,y=0 in the top left hand corner. Most image editing programs are capable of showing these co-ordinates. The actual "hot-spots" will be "hot-areas" or "hot-zones" which can usually be circular, rectangular or polygonal.
There are four basic ways of producing a working map. These are.
All the URLs and "hot-spot" definitions are included in the HTML that is sent to the browser. There is no need for any special files to be constructed on the server. This is the simplest and best technique unless there are very large number of hot spots (>100) or some of the special facilities available via the CGI mechanisms are needed. Client side maps were introduced in HTML 3.2 and some very old browsers may not support this technique.
The usemap attribute of the <img> tag is used to indicate the relevant map definition in the HTML. The map definition is included in the HTML within a <map> ... </map> container using a series of <area> ... </area> containers.
The value associated with the usemap attribute is used to identify the <map> </map> tag pair that enclose the map defintion since there may be several maps on a single page. The <map> tag uses the name attribute to define the identifying instance in a manner very similar to the creation of within-document links and anchors using the <a> tag.
The information that defines the "hot-spots" etc., is stored in a special map information file that remains on the server. The client sends a request back to the server which includes the co-ordinates of the selected point. The server will process the map information file and return a URL to the client.
The ismap attribute is associated with an <img> tag within a <a> ... </a> container. The URL associated with the <a> tag's href attribute will indicate a special file on the server. The server file contains a list of co-ordinates in a specified format. This format is specific for the particular type of server program and the correct operation requires that the server be configured to handle maps correctly.
Most servers require that the map information file should have a name ending in the characters .map This file must consist of a series of records (lines) each consisting of one of the indicators listed below followed by a URL and the co-ordinates. The URL is the one delivered to the user. Point co-ordinates must be given as comma separated pairs.
This defines a rectangular "hot-zone". The co-ordinates will be the top left and bottom right corners of the rectangle.
This defines a circular "hot-zone". The co-ordinates of the centre will be followed by the co-ordinates of any point on the circumference. Note: circles are not defined using centre and radius.
This defines a polygonal "hot-zone". There will be a series of co-ordinates defining the polygon. Closure is implied, i.e. there is no need to repeat the first co-ordinate pair.
No co-ordinates are required. The URL is the URL that is returned to the browser if a point not in any "hot-zone" is selected.
The format for the map file quoted above is actually that required by the NCSA and Apache servers. This is by far the commonest format.
A slightly different file format is required by the CERN WWW server, the coordinate pairs are enclosed by parentheses and a circle is defined by its centre coordinates and radius, the latter being given as a single unparenthesised number. The "hot-zone" types can be defined as "circ", "circle", "rect", "rectangle", "poly", "polygon", "default" and "def".
Other servers may require different formats and the server documentation must be consulted.
Note. On the SCIT WWW server (www.scit.wlv.ac.uk) map files are required to have names ending in the character sequence .mapx. This is because a design error in the Apache server means that, in recognising a map information file, it recognises it by the appearance of the required ending anywhere in the file name rather than at the end of the file name.
As far as the HTML is concerned this is identical to the previous method. The main difference is the link is to a file executed via the CGI mechanism. The user selected co-ordinates are presented to the CGI executable on the command line. It is entirely the responsibility of the CGI executable to decode the co-ordinates and return a suitable URL to the user in accordance with HTTP.
The advantage of this method is that it is possible to implement mechanisms such as click through logging and also it is possible to implement more complex "hot-zone" geometries depending, perhaps, on a bitmap representation of the image.
The HTML <input> tag used within a form container has type=image as one of its possible attribute value pairs. The image functions as a "submit" button, and the values associated with any other form element will also be returned in the usual CGI fashion.
This has all the advantages of the CGI mechanism described previously with the extra advantage that the user can enter all sorts of other information as well as the co-ordinates. For example, it would be possible to provide a mechanism for selecting the nearest public house selling a particular brand of beer using the forms select facility to select the brand and the map to select the place. The CGI back-end would have access to a database of public houses that included their geographical co-ordinates and brand(s) of beer sold. It is important to design the page so that users will not click on the map until they have selected all the other items.