HTML 4.0 Sourcebook
(Publisher: John Wiley & Sons, Inc.)
Author(s): Ian S. Graham
ISBN: 0471257249
Publication Date: 04/01/98

Tools for Generating Imagemap Files

Generating a map file is not difficult and only requires some concentration, a piece of paper, and an image viewing program that gives the pixel coordinates of the mouse pointer. On UNIX systems, the program xv is often used to do this (found at many anonymous FTP sites by searching for the string xv-3.00 or xv-3.10). You load the image into xv, locate the coordinates, and type the numbers into a map file. A similar procedure can be followed with typical Macintosh or PC image editing programs, such as PhotoShop (all platforms), GraphicConverter (Macintosh), or Paint Shop Pro (Windows).

Of course, it is much easier if you have a graphical tool to view the images and automatically generate the map files. Thomas Boutell has satisfied this need with his shareware program mapedit, which lets you read the GIF image into a display window; use the mouse to draw circles, rectangles, and polygons on top; and specify a URL for each of the marked regions. You can also insert comments, which is important if you want to understand the content of the map file at a later date.

Mapedit is available for UNIX systems, Windows PCs, and for Macintoshes. The executables and additional information are found at:

www.boutell.com/mapedit/

There are, of course, other programs that can help you create imagemap database files. The shareware programs WebMap, Mapper and ImageMapper are useful for Macintosh users, while for Windows users there are the programs Coffee Cup Image Mapper++, LiveImage, and Web Hotspots. Information about these packages is found at:

Most of these programs support client-side imagemaps, discussed later in this chapter. Also, most commercial HTML editors include an imagemap editor as one of their software “extras.”

Other Server Imagemap Gateway Programs

There are other imagemapping CGI programs, designed for different platforms or taking a different approach to mapping. Mac-ImageMap, for example, provides imagemap capabilities for the Macintosh WebSTAR (formerly MacHTTP) server, using the NCSA imagemap approach. Glorglox, on the other hand, takes a completely different approach and maps individual pixels onto URLs. Others programs are available; you should inquire at standard archive sites, such as Yahoo, for information about other tools. However, as a document creator your best bet is to stick with the CERN or NCSA default imagemapping programs, since these are well tested with development tools widely available.

Information about Mac-ImageMap and glorglox, respectively, can be found at:

weyl.zib-berlin.de/imagemap/Mac-ImageMap.html

www.net/~tomr/glorglox/

Client-Side Imagemaps

As discussed in Chapter 6, HTML also allows imagemapping information within the HTML document. The advantages are many: The link is faster, since the browser does not need to use a server to resolve the destination; imagemaps are not server dependent, so the documents are portable (you can run client-side imagemaps from a CD-ROM); and destination links can be shown as the mouse moves across the image, as all the relevant information is coded into the HTML.

An example of a client-side imagemap is shown in Figure 3.6. A client-side imagemap stores the mapped coordinate data within a MAP element, where each MAP element takes a NAME attribute to identify the map: consequently that a single HTML document can contain more than one map. The regions inside the map are indicated by AREA elements. These elements take four main attributes: SHAPE to indicate the shape (possible values are “rect” for rectangle, “circle” for circle, or “poly” for polygon), COORDS for the coordinates (in integer pixels from the upper left-hand corner of the image), HREF for the URL reference, and ALT for a text description of the link. In place of HREF, an area element can take the NOHREF attribute, which takes no value and simply means that the region is not linked to anything. The allowed shapes and a description of the required coordinate values are summarized in Table 3.2.

As with regular server-side imagemaps, regions can overlap, in which case the browser simply selects the first region that fits when looking down through the list of AREAs.

You can combine client-side and server-side imagemaps in the same image; a browser that understands client-side imagemaps will use the local map information, while other browsers will revert to the server-side database. Figure 3.7 shows how this is done using the client-side example in Figure 3.6 as a reference. The required additions are shown in boldface italics—all that is needed is an appropriate anchor element surrounding the image, and an ISMAP attribute in the IMG element.

. . . standard HTML stuff . . .
<IMG SRC=“mr_blobby.gif” USEMAP=“mapname”>
. . . more HTML stuff . . .
<MAP NAME=“mapname”>
   <AREA SHAPE=“circle” COORDS=“116,40,30”
         HREF=“/dir1/blob2/his_head.html” ALT=“text explanation”>
   <AREA SHAPE=“rect” COORDS=“36,30, 84,90”
         HREF=“/dir1/blob2/his_hand.html” ALT=“text explanation”>
   <AREA SHAPE=“poly” COORDS=“86,154,64,170,76,188,104,184,112,166”
         HREF=“<http://egghead.com/foot.html>” ALT=“text explanation”>
</MAP>
. . . rest of HTML document . . .