Building Net Sites with Windows NT - Clickable Image Maps

Building	Net Sites	with Windows NT
An Internet Services Handbook

by Jim Buyens

Excerpt from Chapter 16 - Advanced Web Services

16.1 Clickable Image Maps

The use of bitmapped images as menus is a common Web page feature. HTML instructs the browser to retrieve and display a named image file in much the normal way, but the HTML specifies two additional parameters. One identifies the image as a clickable image map, and the other gives the name of a map file on the server.

When the user clicks on the image, the browser appends the mouse coordinates to the URL and transmits the request to the server. The server uses the map file to translate the mouse coordinates.

If the URL is locally available, the server resolves it on the spot.
If the URL points to another computer, the server sends the URL back to the client (via a "redirect" response) and the client gets the page from the other computer.

The first HTML servers to support Clickable Image Maps were the CERN and NCSA servers. CERN map files have a different internal format than NCSA map files, but virtually all other servers use one of these formats.

A relatively new approach - called Client Side Image Maps - embeds mapping data in the page's HTML rather than a separate file that stays on the server. This (1) increases the amount of data sent out with the page but (2) eliminates the two-step process of contacting one HTTP server to get the mouse coordinates translated and a second server to obtain the specified page.

Here's the HTML for a simple page with a server-side clickable image map.

scanner.htm

<HTML>
<HEAD>
<TITLE>Scanner Technology at interlakken.com</TITLE>
</HEAD>
<BODY>
<H1>Scanner Technology at <I>interlakken.com</I></H1>
<HR>
<A HREF="/scn_cern.map">
<IMG SRC="scanner.gif" ISMAP></A><HR>
<ADDRESS>Updated by Jim Buyens</ADDRESS>
</BODY>
</HTML>

The ISMAP keyword identifies the "scanner.gif" picture as a clickable image map and "scn_cern.map" is the name of the map file located on the HTTP server. The listing below shows the contents of the map file and Figure 16.1 shows how Netscape displays the scanner.htm page.

scn_cern.map

default scandeft.htm
polygon (345,34) (385,34) (389,38) (384,47) (353,57) (346,49) (350,34) (349,34) (345,34) (345,34) scanrigt.htm
rectangle (20,228) (158,260) scanshoe.htm
circ (208,73) 30 scanleft.htm

Figure 16.1 Netscape Navigator Displaying a Clickable Image Map Page

Figure 16.1 shows Netscape Navigator displaying the URL "http://www.interlakken.com/scn_cern.map?209,75" in the status line at the bottom of the window. These are the current X-Y coordinates of the mouse pointer (which the screen shot doesn't show).

Clicking the mouse at (209,75) causes the server to read the image file looking for a match.
(209,75) matches the last line in the file, a circle with radius 30 centered at (208,73).
As proven by Figure 16.2, matching the "circ (208,73) 30 scanleft.htm" line causes the server to respond with the scanleft.htm page. This is the page specified in the last line of the scn_cern.map file.

Figure 16.2 Response to Clicking "scanner.gif" at (209,75).

Line two specifies a polygon shape with corners at the specified X-Y coordinates and line three defines a rectangle whose opposite corners are (20,228) and (158,260). The line "default scandeft.htm" specifies the action if the user clicks an area not otherwise defined. Every image map description requires a default entry.

The map scn_cern.map file discussed so far is in the CERN format, which is the format EMWAC HTTPS requires. The equivalent file in NCSA format would be:

scn_ncsa.map

default scandeft.htm
poly scanrigt.htm 345,34 385,34 389,38 384,47 353,57 346,49 350,34 349,34 345,34 345,34
rect scanshoe.htm 20,228 158,260
circle scanleft.htm  209,75 239,87

This file contains essentially the same information as the CERN file except that (1) parentheses don't surround X-Y pairs, (2) abbreviations replace the keywords rectangle and polygon, and (3) the URL selected in case of a match appears in the second (rather than last) position. In addition, two pairs of X-Y coordinates, rather than a center point and radius, describe the circle; this allows definition of ellipses as well as true circles.

The following code is a client-side image map equivalent to scn_cern.map and scn_ncsa.map.

<BODY>
<MAP NAME="scn_csim">
<AREA SHAPE=POLY COORDS="345,34,385,34,389,38,384,47,353,57,346,49,350,34,
349,34,345,34,345,34" HREF=scanrigt.htm>
<AREA SHAPE=RECT COORDS="20,228,158,260" HREF=scanshoe.htm>
<AREA SHAPE=CIRCLE COORDS="209,75,30" HREF=scanleft.htm>
<AREA SHAPE=default HREF=scandeft.htm>
</MAP></BODY>

Integrating this code into the original scanner.htm file produces the following. Added or changed lines appear in bold.

scancli.htm

<HTML>
<HEAD>
<TITLE>Scanner Technology at interlakken.com</TITLE>
</HEAD>
<BODY>
<H1>Scanner Technology at <I>interlakken.com</I></H1>
<HR>
<MAP NAME="scn_csim">
<AREA SHAPE=POLY COORDS="345,34,385,34,389,38,384,47,353,57,346,49,350,34,
349,34,345,34,345,34" HREF=scanrigt.htm>
<AREA SHAPE=RECT COORDS="20,228,158,260" HREF=scanshoe.htm>
<AREA SHAPE=CIRCLE COORDS="209,75,30" HREF=scanleft.htm>
<AREA SHAPE=default HREF=scandeft.htm>
</MAP>
<IMG SRC="scanner.gif" USEMAP="#scn_csim"><HR>
<ADDRESS>Updated by Jim Buyens</ADDRESS>
</BODY>
</HTML>

The block of code from <MAP> to </MAP> repeats the data seen previously in the scn_cern.map and scn_ncsa.map files. In addition,

<IMG SRC="scanner.gif" USEMAP="#scn_csim">has replaced

<A HREF="/scn_cern.map">
<IMG SRC="scanner.gif" ISMAP></A>

The file scancli.htm contains both the page description and the client side image map. The USEMAP parameter therefore points to a location within the same file (namely "#scn_csim"). This is the same notation used for bookmarks, which also denote locations within an HTML file.

The client side image map can also exist as a separate file on the server; in such a case the USEMAP parameter contains a path and filename as well as the "#" map name. USEMAP can even point to the HTML file for another page, assuming the named <MAP> description exists within that file.

Counting pixels and constructing map files by hand quickly becomes tiresome. The job cries out for an editor that displays the relevant image and lets the user define areas with mouse movements. Several such editors are available for Windows including a freeware program called "Map This!" available from Todd C. Wilson's Web site. Figure 16.3 illustrates a typical editing session using Map This!

Figure 16.3 A Map This! Image Mapping Session.

Note from the MDI document title bar that two files are open: scanner.gif and scn_cern.map. Dotted outlines with handles indicate the three now familiar clickable areas: the rectangle around the shoes, the circle around the left nose, and the polygon outlining the right nose. Clicking the first three buttons on toolbar would activate circle, rectangle, and polygon drawing tools respectively; after selecting a tool, you could outline additional clickable areas with the mouse.

To assign a URL to a clickable area, select the arrow tool and double-click the outlined area. The dialog of Figure 16.4 will result. As shown, the circle area is item #3 in the list of clickable areas and, if clicked, it will invoke the URL scanleft.htm. URLs with full paths and with computer names are also acceptable.

Figure 16.4 A Map This! Image Mapping Session.

Pulling down Map This!'s View menu and selecting Area List produces the dialog box shown in Figure 16.5. This shows the currently-defined clickable areas, the currently-selected area's associated URL, and the order of clickable areas. The order is important because searching stops with the first match; if the user clicks an area that's part of two or more overlapping areas, the area occurring first in the list takes precedence.

Figure 16.5 Map This! Area List.

Pulling down Map This!'s Edit menu and selecting Edit Map Info produces the dialog of Figure 16.6. Here you can specify the default URL, the map file format, and other informational fields. You can also specify the map file format in the File Save As dialog.

Figure 16.6 Map This! Edit Map Info Dialog

Whenever it saves a map file, Map This! embeds comments recording the associated image file path and filename. When you reopen the same map file, Map This! uses these comments to automatically open the corresponding image file. If no comments are present or Map This! can't locate the path or filename, you'll have to locate and open the corresponding image file yourself.

The examples in this section used the EMWAC HTTPS server. This and the Microsoft IIS Web server use image maps in CERN format. O'Reilly WebSite and the Netscape HTTP servers require NCSA-style map files. If you have trouble getting WebSite to recognize relative URL's, try specifying a full path (that is, one beginning with a slash).