![]()
Previous Chapter
Image map file formats |
Image mapsImage 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 formatsThe 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.CERNOne of the first WWW servers to emerge, the CERN httpd, implements image maps using .map files and four methods on the following form:
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/ApacheThis 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:
Creating Image mapsSuppose 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:
| ||
| ||
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:
<A HREF="/new.map"> <IMG SRC="/image1.gif"ISMAP></A> Roxen and Image mapsRoxen 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 RoxenWhen 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.
| ||
![]() |
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: | |
| ||
![]() |
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: | |
| ||
Client-side image mapsUsing 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. | |
| ||
Previous Chapter Next Chapter Table of Contents Index
|