Création d'images actives sur WWW

Une des tâches les plus lourdes lors de la création de pages HTML est d'associer des hyperliens à des graphiques, logos ou des cartes que l'utilisateur n'aura plus qu'à cliquer pour pointer sur d'autres documents ou URL.


Le serveur du CERN fournit de la documentation en ligne sur son programme HTImage à .

Jetez également un oeil sur


Les utilisateurs du serveur http de NCSA peuvent se reporter au document tutorial/image-maps.html ou essayer Glorglox Advanced Image Mapper disponible sur orglox/ .


MapEdit est un programme pour Windows permettant de définir des "hotspots" sur des images. Surfez sur


Pour les adeptes de MacHTTP, les outils MapServe et ImageMap sont respectivement disponibles sur et

Russ Jones, co-auteur du livre "Managing Internet Informations Services" propose un intéressant tutoriel sur les Image Maps à l'adresse gnn/bus/ora/features/miis/index.html .

Managing Internet Information Services, our new guide for UNIX system administrators, describes in detail how to set up Internet servers for World Wide Web, Gopher, FTP, Finger, Telnet, WAIS (Wide Area Information Services), and email services. This article, excerpted from the book, offers concrete guidelines for using clickable image maps in your Web server.

Let's say you want people to be able to get their local weather from your Web server. What would be better than to show them a map of the country (inline), and allow them to click on any location to get that location's weather? That's what a clickable image map does. It has many other uses. For example, it helps users better understand a picture or diagram by allowing them to click on a component represented in the graphic to see an explanation. It also lets users move down to finer levels of detail on a map of a campus or building.

Clickable image maps obviously work only with graphically oriented Web browsers. You should always try to provide alternate text-based methods of accessing the same information.

There are several well-defined steps you need to take when creating a clickable image map:

Let's take a look at each of these steps in detail.

Planning the Clickable Image Map

First determine the inline image you will use. As for any inline image, the graphic needs to be in GIF format for widest portability. Most graphics service bureaus can scan photographs to create GIF files, or you can draw the graphic with a paint program.

Then rough out mentally where you will place the hotspots. Let's take a look at an example -- a photo of my office. I'm going to use this as the basis of creating a virtual office. With the blurring between the physical world we live in and the virtual online world found on the Web, I should be able to have some fun with this photo.

Arbitrary rectangles, polygons, and circles can be used to identify the hotspots. The photo shows how the hotspots in this image are conceptualized. I can directly hyperlink some of the physical things found in the photo to their virtual equivalents found out on the Web. For example, I placed a copy of Wired magazine on my table. I can establish a hyperlink from the magazine in the photo to Wired magazine's Web server. Where virtual equivalents don't exist, I can create them.


Mapping the Hotspots in a Map File

The second step is to develop an image map file. You will need to create a separate image map file for each clickable image map on your Web server. Each line in an image map file defines a hotspot, by defining an area within the graphic and the corresponding URL to be returned if someone clicks on that area. You can include comment lines by beginning the line with the pound sign (#).

Hotspots are formatted as:

shape URL coordinate-1,coordinate-2 ... coordinate-n

where shape is one of the following:

Coordinates are x,y pairs counting in pixels from the upper left-hand corner of the image. The URL can be either an actual URL pointing to any resource on the World Wide Web or can be a URL on your server but without the http://hostname. Let's look at the image map that I put in the file

default /map/none.html
poly /map/upper-right-drawer.html 423,319 423,352, 499,359,499,326
poly /map/lower-right-drawer.html 423,352, 422,416 498,425 499,359
poly /map/home-page.html 425,220 419,226 442,271 447,222
poly /map/workstation.html 519,364 517,460 633,478 638,376
rect /map/bookshelf.html 0,60 139,143
poly 51,357 77,393 144,385 115,365
poly 55,413 46,429 120,425 126,410
poly /map/books-on-table.html 0,375 0,436 45,413 46,380
poly /map/t.html 0,395 0,467 155,458 230,436 273,401 225,371 153,364 67, 372
rect /map/stereo-speaker.html 221,90 268,140
poly /map/wall-picture.html 167,0 171,89 226,96 263,0

The server takes the coordinates from a user's mouse click and steps through the map file to determine if the click is within any hotspots. As soon as the first match is found, the corresponding URL is used to redirect a document to the user's Web browser. If no matches are found, a default URL (that you specify in the image map file) is returned. There can be only one default per map file.

It is normal to mix and match circles, multiple polygons, and assorted rectangles in the same map file. Although you should try to minimize overlapping hotspots in the image map, if there are any, the first match is the one used. Just make sure they are ordered the way you want them. How do you determine the x,y pixel coordinates to go into each entry? One way is to use a program like xv to view the image and then just click on the graphic to get the coordinates needed according to the shape you want to use for each hotspot.

Note that all the URLs given in the map file are HTML files, not graphic files, even though some of them actually display pictures. I could have had the URL for the photo on the wall point directly to a GIF file of that photo, but I didn't. That would have made the assumption that the user has an external viewer capable of handling GIF files (because only graphics invoked from within HTML documents are shown inline). Instead, I have each hotspot point to an HTML file. Then each HTML file handles the graphic as an inline image.

For default URLs (for when someone clicks on a spot that isn't hot), I return an error message along with the a smaller version of the same photo of my office but with the hot spots marked. Actually, it's a lot like the photo above. Don't return a complicated graphic that says only "sorry; try again." On a slow link, the error message/graphic can take quite a while to retrieve and be frustrating when the user sees that the graphic it took 30 seconds to retrieve wasn't what he wanted. Or use a simple text error message if the default is an error.

Connecting Your Map File to a URL

The next step ties your map file to the map name that you will use in your HTML. The imagemap.conf configuration file contains a list of all your server's map file locations and their corresponding names. It is usually found in the conf directory in your Web server root directory. In imagemap.conf, lines beginning with a pound sign (#) are comments. Every other nonblank line is an entry that consists of:

name: path

where name is the map name and path is the absolute path to an image map file, or a relative path from the web server root directory. In the example we have used so far, you would include the following map entry in imagemap.conf:

office: /map/

The imagemap.conf file is not loaded when you start your httpd server. It gets reloaded every time someone clicks on a clickable image map. You can place map files anywhere you want to on your server. You may want to keep the map files for one server all logically together in the same map directory or you may want to encourage individuals to keep the image map together with the image and any supporting HTML documents in the same directory structure.

Referencing Your Clickable Image Map in HTML

The final step in creating an image map is to tell the Web browser accessing the HTML document that the inline image it will display is a clickable image map. This is done by adding the optional ISMAP qualifier to the <IMG> tag:


In practice what you do is create a link where this image is the link trigger and the URL invokes the imagemap script and passes it the map name:

<A HREF="/cgi-bin/imagemap/map-name">

I'll explain how this actually works in a moment. But all you really need to know is to use exactly this HTML, substituting your map name (from before the colon in imagemap.conf) and your URL. In this example, you would reference the virtual office image map with the following HTML:

<A HREF="/cgi-bin/imagemap/office">
<IMG SRC="/map/office.gif" ISMAP></A>

Testing the Image Map

Now if the magic works, the image map should be working. First open the URL of the document containing the HTML just shown. An inline image, like the one shown below, should appear in the browser.

How It Really Works

imagemap is a precompiled gateway that is included in the cgi-bin directory with the Web server distribution.

Here's how an image map actually works. When the user clicks on the image, it triggers the link, which makes the Web server invoke the imagemap program, passing it the map name. The imagemap program opens imagemap.conf and uses the map name to get the right map file. Then it opens the map file and searches for the first hotspot that matches the button click. When it finds one, it returns the matching URL.

If you have changed the default directory where the imagemap.conf configuration file is kept to anything other than /usr/local/etc/httpd/conf, then you will need to change the imagemap.c source and recompile it to reflect where the imagemap.conf file is actually located.

Once you understand how image maps work you realize the performance implications. Two files are opened and read for every click on an image map. There is also some processing to determine which hotspot matches the click. So image maps are not free, and you should take care to keep imagemap.conf and your map files as short as possible.

Russ Jones is the Internet Program Manager responsible for how Digital Equipment Corporation uses the Internet as a communications and publishing tool. He led the development of one of the first large commercial servers on the World Wide Web.

This article was excerpted from the book Managing Internet Information Services.

This excerpt also appears in the Fall 94 issue of

Dernière modification :14/4/95.

Eric Lapaille / RTFM /