Previous Chapter
Next Chapter
Table of Contents
Index

Image map file formats 
   CERN
   NCSA/Apache
   Creating Image maps
   Roxen and Image maps
   Client-side image maps

Image maps


Image maps are clickable images. Clicking on different areas so called hot spots of the image allows you to access different network resources, as specified by URLs.

An image map ordinarily consists of two files; the image file itself and the associated map file.

In defining a map file you define areas for the image by providing pixel coordinates of suitable corners and vertices. The origin of both the X-axis and the Y-axis is the upper left corner. You can define rectangles, circles and even polygons. After having defined an area you associate it with a URL. Finally, you should define some kind of default URL which is used if the user clicks on a part of the image that is not covered by any defined area(s).

Image map file formats

The two most common map file formats are the NCSA and CERN formats. Both of these formats are server-side image maps. This means that clicks are processed by interaction with a Web server.

CERN

One of the first WWW servers to emerge, the CERN httpd, implements image maps using .map files and four methods on the following form:

circle (X,Y) R URL
  • Any point inside the circle centered in (X,Y) and with the radius R will return the url URL.

rectangle (X1, Y1) (X2, Y2) URL
  • (X1, Y1) are the coordinates of the upper left corner of a rectangular area whose lower right corner has the coordinates (X2, Y2). Any point inside the box will return the url URL.

polygon (X1, Y1) (X2, Y2) ... (Xn, Yn) URL
  • Every value pair is a vertice. The first and last should be the same thus closing the area, but if they are not Roxen will (as htimage in httpd does) complete the series of adjacent vertices.

#default
default URL
  • If the area which you click doesn't correspond to anything the url URL will be returned.

The keywords may be abbreviated as def, circ, rect and poly respectively. All lines starting with a "#" are considered comments.


Note that methods are checked in the order they appear in the map file. In the case where you have overlapping regions, such as a polygon inside of a rectangle, the first region defined takes precedence.

The URL may be full or relative to the directory of the map file. The advantage is that when you don't provide a full URL the server does not have to send a redirect to the browser, thus saving time and bandwidth.

NCSA/Apache

This format is almost identical to the CERN format, but with one change; the URL should come before the coordinates. There is also one addition to the methods available:
point URL (X,Y)
  • This just specifies a single point and ties a URL to it. If more than one point is specified in the file, the one closest to the position on which the user clicks will be used.

Creating Image maps

Suppose you had the below picture and you wanted to make this image an image map.


Image1.gif

The first thing to do is to take out the desired coordinates of the image, this is preferably done by the use of an image editor, such as Photoshop for example. As soon as you have done this you can get on with creating a map file, where you include the hot spots and the corresponding URLs to each hot area. The associated map file to the image1.gif will look something like this:

rect (69,195) (271,222) http://www.sportsgate.com/Fishing.html/
rect (1,139) (86, 181) http://www.aboutclimbing.com/
default http:/www.outdoorlife.com/

This signifies that the cliff on the left links to a "Climbing page", while clicking on the boat will take us to a "Fishing page". Clicking on any other area of the will default to the "Outdoor life" page. In order to make this image an image map you have to:

  • add the attribute ISMAP to the <IMG> tag
  • reference you .map file.
Suppose your newly created mapfile is called new.map and resides in the same directory as the image image1.gif, well then the markup for this will be:

<A HREF="/new.map"> <IMG SRC="/image1.gif"ISMAP></A>

Roxen and Image maps

Roxen has support for ISMAP images in the form of a separate module, the ISMAP Image map module. Roxen has its own map file format but this module also has full built-in support for NCSA and CERN mapfiles. You can, if you want to, mix these three mapfile formats in the same file.

If you come across any other mapfile formats, feel free to send us an example file, so we can add support for that format as well. Most servers can use one or both of the first two formats (NCSA and CERN).

The notable variable in the image map module is the mapfile extension. All files ending with this extension, will be parsed as map-files. The default is .map.

Note that with Roxen you can put your .map files anywhere in the virtual filesystem, you are not limited to using a separate directory, since the image map module is part of Roxen, not a separate CGI-script as for other servers.

Creating Image maps with Roxen

When creating image maps with Roxen, Roxen automatically deduces the area type from the given coordinates. Roxen also supports ppm and pgm files, which allows the use of colors as representatives of URLs.
(X1,Y1)-(X2,Y2) URL
  • (X1, Y1) are the coordinates of the upper left corner of a rectangular area whose lower right corner has the coordinates (X2, Y2). Any point inside the box will return the url URL.

(X,Y),R URL
  • Any point inside the circle centered in (X,Y) and with the radius R will return the url URL.

(X,Y) URL
  • this just specifies a single point and ties a URL to it. If more than one point is specified in the file, the one closest to the position on which the user clicks will be used.

ppm:PPM_file
  • Use the PPM file referred to by the absolute file system path PPM file. Each color in that file may give a different URL.

pgm:PGM_file
  • As PPM, but the file is a greyscale file.

    color:(r,g,b):URL
    • In all PPM files referenced, this color will point to the url URL. r,g and b are decimal integers between 0 and 255 and the color defined is the combination of the red (r), green (g) and blue (b) intensities. If the file searched is a PGM (greyscale) picture, the greyscale will be (r+g+b)/3.

color:(r,g,b)-(r,g,b):URL
  • All colors in the range will point to URL. If the file searched is a PGM (greyscale) picture, the greyscale will be (r+g+b)/3.

color:greyscale-greyscale:URL
  • All colors with an intensity falling within the range will point to URL.

default:URL
  • The url URL will be returned if nothing else matched. Don't forget to set it.

void:URL
  • The url URL will be returned if the client doesn't support imagemaps or if the mapfile is accessed without coordinates.


The advantage of these files is that they allow you to define other shapes than rectangles, circles and polygons, giving you greater flexibility to treat your image. The associated mapfile for image1.gif will with Roxen look something like this:

rect (69,195) (271,222) http://www.sportsgate.com/Fishing.html
(1,139)-(86,181) http://www.aboutclimbing.com
default http://www.outdoorlife.com

Note that we have mixed the CERN and Roxen formats in this map file. As mentioned above the method can be excluded.

Suppose now you would like to have every white spot in your image map refer to a certain URL. In order to accomplish this you should convert your image to a ppm format and include the following:

ppm: /home/funda/html/image1.ppm
color: (255,255,255): http://www.tshirts.byus.com/

in the new.map file.

Client-side image maps

Using a server-side image map requests a connection to a remote server. With client-side image maps, however, the browser processes the data without interaction with a Web server. As this method saves a round trip to the servers the processes is speeded up considerably.

As not every browser is able to handle client-side image maps you should make image maps that work regardless of the browser used. This is done by including provisions for both client-side and sever-side image maps, respectively.

<a href="/new.map"><img src="image1.gif" USEMAP="#image1.gif" ISMAP></a>
Previous Chapter
Next Chapter
Table of Contents
Index