Chapter 9

Image Maps

by Eric Ladd

• Server-Side Image Maps
  • Preparing the Map File
  • Setting up the Image Map
  • Example: A Main Page Image Map
  • Example: A Navigation Image Map
• Client-Side Image Maps
  • Advantages
  • Defining a Map
  • Setting Up the Image Map
  • Example: A Main Page Image Map
  • Example: A Navigation Image Map
• Using Server-Side and Client-Side Image Maps Together
• Providing a Text Alternative to an Image Map
• Image Map Tools
  • Map This!
  • Mapedit
  • Web Hotspots

If you use a graphical browser, you've probably noticed that many major Web sites have a large clickable image on their main page. These images are different from your run-of-the-mill hyperlinked graphic in that your browser loads a different document, depending on where you click. The image is somehow "multiply-linked" and can take you to a number of different places. Such a multiply-linked image is called an image map.

The challenge in preparing an image map is defining which parts of the image are linked to which URLs. Linked regions in an image map are called hot regions and each hot region is associated with the URL of the document that is to be loaded when the hot region is clicked. Once you decide the hot regions and their associated URLs, you need to determine whether the Web server or the Web client will make the "decision" about which document to load, based on the user's click. This choice is the difference between server-side image maps and client-side image maps. Either approach is easy to implement once you know the information needed to define the hot regions.

This chapter walks you through the necessary steps for creating both server-side and client-side image maps and introduces you to some software programs that make the task of defining hot regions much less tedious.

Server-Side Image Maps

A server-side image map is one in which the server determines which document should be loaded, based on the user's click on the image map. To make this determination, the server needs the following:

• The coordinates of the user's click  This information is passed to the server by the client program.
• A program that takes the click coordinates as input and provides an URL as output  Most servers have a routine built in that handles this task.
• Access to the information that defines the hot regions and their associated URLs  This information is critical to the processing program that checks the hot regions to see if the user's click corresponds to an URL. When the program finds a match, it returns the URL paired with the clicked hot region. The file on the server that contains this information is called a map file.

Additionally, you need two other "ingredients" to complete a server-side image map:

• An image  An image map is like any other graphic in that you need to have a GIF or a JPEG file that contains the image.
• Proper set-up in your HTML file  When you place the image map graphic, you use the <IMG> tag with a special attribute to alert the client program that the image is to be used as a server-side image map.

As an HTML author, you need to be most concerned about two of the items listed above: the map file and the setup in the HTML file. These two aspects of creating an image map are discussed in the next two sections.

Preparing the Map File

The map file is a text file that contains information about the hot regions of a specific image map graphic. For this reason, a separate map file is necessary for each image map graphic you want to use. The definition specifies the type of region located in the graphic as either a rectangle, circle, polygon, or point.

These regions, as their names suggest, refer to the geometric shape of the hot region. Their defining coordinates are determined as pixel points relative to the upper left corner of the image map graphic, which is taken to have coordinates (0,0). The following list identifies basic image map shape keywords and their required coordinates:

• rect  This keyword indicates that the hot region is a rectangle. The coordinates required for this type of shape are the upper left and lower right pixels in the rectangle. The active region is the area within the rectangle.
• circle  This keyword indicates that the region is a circle. Coordinates required for using a circle are the center-point pixel and one edge-point pixel (a pixel on the circle itself). The active region is the area within the circle.
• poly  This keyword indicates that the hot region is a polygon. Coordinates are required as a list of vertices for the polygon. A polygon region can contain up to 100 vertices. The active region is the area within the polygon.
• point  This keyword indicates that the region is a point on the image. A point coordinate is one specific pixel measured from the upper left corner of the image map graphic. A point is considered active if the click occurs closest to that point on the graphic, yet not within another active region.
• default  This keyword indicates all areas of an image map graphic that are not specified by any other active region.

Following each type of region in the image map definition file is the URL that is returned to the user when a click within that area is recorded. Active regions in the definition file are read from the first line down. If two regions overlap in their coordinates, only the one referenced first is activated by the image map program.

Two primary types of map file configurations exist: one for the original CERN-style image maps and one for the NCSA server's implementation of image maps. Both use the same types of hot regions and the same coordinates to define each type. However, the formatting of this information in each map file is different. For this reason, you should check with the system administrator about the particular image map setup of the server you are using.

The CERN Map File Format  Lines in a CERN-style map file have the following form:

region_type coordinates URL

The coordinates must be in parentheses, and the x and y coordinates must be separated by a comma. The CERN format also doesn't allow for comments about hot regions. A sample CERN-style hot region definition might look like the following:

poly (133,256) (42,378) (298,172) http://www.your_firm.com/triangle.html

The NCSA Map File Format  NCSA developed a slightly different format from CERN's for the map file information. Their format is as follows:

region_type URL coordinates

The coordinates don't have to be in parentheses, but they do have to be separated by commas. The equivalent of the map data line presented previously in NCSA format is as follows:

rect http://www.your_firm.com/triangle.html 133,256 42,378 298,172

Setting up the Image Map

Because of the differences in image map processing programs on different servers, you can use two techniques for setting up image maps.

NCSA and CERN Servers  After you create a map file for an image, you must make it an anchor to include it in an HTML file, like this:

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

The hypertext reference must contain the URL to the image map script followed by a slash (/) and the name of the map defined in the Imagemap.conf file. In the example above, the name of the map is Mainpage. The actual graphic is then included with the <IMG> tag. The <IMG> tag also includes the ISMAP attribute, indicating that the image placed by the tag is to be a server-side image map.

For this example to work, the Imagemap.conf file must also include a line pointing to a map file for the image map Mainpage. That line might look like the following:

mainpage : /maps/mainpage.map

Entries in the Imagemap.conf file enable the image map program to find the map files you create. You need a similar entry in the Imagemap.conf file for each image map you want the server to process.

Netscape and Windows HTTP Servers  Linking to the image map script on the server is somewhat easier under Netscape and Windows HTTP servers. For this program, you just use the following line with an NCSA-style map file:

<A HREF="/maps/mainpage.map">
<IMG SRC="images/mainpage.gif" ISMAP></A>

These servers don't require the Imagemap.conf file, so you can "eliminate the middle-man" and point directly to the map file.

Example: A Main Page Image Map

Figure 9.1 shows an image to be used as an image map on the main page of a typical corporate site. The coordinates to define the hot regions in the image are given in Table 9.1.

Figure 9.1 : A typical main page image map features links to major parts of the site.

To set this up in a CERN-style map file, you use

rect (6,7) (102,86) http://www.your_firm.com/geninfo.html
circle (283,118) (320,155) http://www.your_firm.com/press.html
poly (77,181) (59,142) (156,145) (156,233) (134,213) (79,233) (30,206) 
http://www.your_firm.com/annrept.html

For a server that works with the NCSA map file format, you use

rect http://www.your_firm.com/geninfo.html 6,7 102,86 
circle http://www.your_firm.com/press.html 283,118 320,155 
poly http://www.your_firm.com/annrept.html 77,181 59,142 156,145 
156,233 134,213 79,233 30,206

With a map file set up in one style or another, you then set up the image map with

<A HREF="http://www.your_firm.com/cgi-bin/imagemap/main">

<IMG SRC="images/main.gif" ISMAP ...></A>

for servers that use an Imagemap.conf file or with

<A HREF="http://www.your_firm.com/maps/main.map">
<IMG SRC="images/main.gif" ISMAP ...></A>

for servers that automatically go to the map file.

Example: A Navigation Image Map

Another very common use of image maps is for navigation bars at the top or bottom of a Web page. Figure 9.2 shows a typical navigation graphic with the hot regions defined by the information in Table 9.2.

Figure 9.2 : A standard navigational image map on every page enables users to get to anywhere from anywhere else.

The CERN format map file for this image map looks like the following:

rect (18,1) (108,33) http://www.your_firm.com/geninfo.html
rect (129,1) (194,33) http://www.your_firm.com/press.html
rect (214,1) (277,33) http://www.your_firm.com/annrept.html
rect (300,1) (369,33) http://www.your_firm.com/findata.html
rect (382,1) (485,33) http://www.your_firm.com/jobs.html
rect (507,1) (581,33) http://www.your_firm.com/calendar.html

If you're preparing a map file in NCSA format, you use

rect http://www.your_firm.com/geninfo.html 18,1 108,33 
rect http://www.your_firm.com/press.html 129,1 194,33 
rect http://www.your_firm.com/annrept.html 214,1 277,33 
rect http://www.your_firm.com/findata.html 300,1 369,33 
rect http://www.your_firm.com/jobs.html 382,1 485,34 
rect http://www.your_firm.com/calendar.html 507,1 581,33

Once your map file is done in the appropriate format, you set up the image map with

<A HREF="http://www.your_firm.com/cgi-bin/imagemap/navigate">
<IMG SRC="images/navigate.gif" ISMAP ...></A>

or with

<A HREF="http://www.your_firm.com/maps/navigate.map">
<IMG SRC="images/navigate.gif" ISMAP ...></A>

depending on whether or not the server uses an Imagemap.conf file.

Client-Side Image Maps

Having the server do the work of finding out where the user clicked and where to send the user based on the click, involves a lot of wasted resources. The client has to open another HTTP connection to the server to pass the coordinates and get the response back regarding what URL to load next. The computations the server has to do to find out what hot region the user clicked are straightforward, and there's no reason they can't be done by the client. Slow transmission times between client and server mean that users may have to wait quite a while from the time they click the mouse to the time the new URL is loaded.

Until recently, the compelling reason for having the server do the image map computations was that the map file data resided on the server. If there were a way to get this information to the client, then the client could do the computations and the image map process would become much more efficient. This is the spirit behind client-side image maps.

Client-side image maps involve sending the map data to the client as part of the HTML file rather than having the client contact the server each time the map data is needed. This process may add to the transfer time of the HTML file, but the increased efficiency is well worth it.

Advantages

The movement toward client-side image maps has been fueled by the promise of a number of advantages, which include:

• Immediate processing  Once the browser has the map file information, it can process a user's click immediately instead of connecting to the server and waiting for a response.
• Offline viewing of Web pages  If you're looking at a site off a hard drive or a CD-ROM drive, there's no server at all to do any image map computations. Client-side image maps allow image maps to be used when you're looking at pages offline.
• No special configurations based on server program  Client-side image maps are always implemented the same way. You don't need to format the map data differently, depending on whether a server expects CERN or NCSA image maps, because there's no server involved.

Previously, the only disadvantage of using client-side image maps was the fact that it wasn't standard HTML and, therefore, not implemented by all browsers. Now that client-side image maps have been adopted as part of HTML 3.2, you can expect those graphical browsers that do not yet support them to come into compliance fairly quickly.

Defining a Map

A client-side image map is defined using HTML tags and attributes, usually right in the HTML file that contains the document with the image map. The map data is stored between the <MAP> and </MAP> container tags. The <MAP> tag has the mandatory attribute NAME, which is used to give the image map data a unique identifier that can be used when referencing the data.

Inside the <MAP> and </MAP> tags, hot regions are defined by stand-alone <AREA> tags-one <AREA> tag for each hot region. The <AREA> tag takes the attributes shown in Table 9.3.

For example, the triangle link set up during the discussion of server-side image maps would take the following form as a client-side image map:

<MAP NAME="triangle">
<AREA SHAPE="poly" COORDS="133,256,42,378,298,172" 
HREF="http://www.your_firm.com/triangle.html" ALT="Triangle Link">
</MAP>

The preceding HTML sets up a map named "triangle" that has one hot region. Note that the numbers in the list of coordinates for the COORDS attribute are all separated by commas and that the URL in the HREF attribute is fully-qualified.

The <AREA> tag can also take a NOHREF attribute, which tells the browser to do nothing if the user clicks on the hot region. Any part of the image that is not defined as a hot region is taken to be a NOHREF region, so if users click outside a hot region, they don't go anywhere by default. This approach saves you from setting up an <AREA SHAPE="DEFAULT" NOHREF> tag for all your maps.

Setting Up the Image Map

With the image map data set up in HTML form, you next need to set up the image map itself. To do this, you just use the <IMG> tag along with the USEMAP attribute. USEMAP tells the browser that the image to be used is a client-side image map and that it is set equal to the name of the map that contains the appropriate map data. For the client-side image map defined above, the setup would look like:

<IMG SRC="images/mainpage.gif" USEMAP="#triangle">

The pound sign (#) before the map name indicates that the map data is found in the same HTML file. If the map data is in another file called Maps.html (which is perfectly okay), your <IMG> tag would look like the following:

<IMG SRC="images/mainpage.gif" USEMAP="http://www.your_firm.com/maps.html#triangle">

Storing all your maps in a single file is a good idea if you're placing the same image map on several pages. This way, if you need to make a change, you have to make it in only one file rather than in every file where the map is referenced.

Example: A Main Page Image Map

To set up the map information to make the image in Figure 9.1, a client-side image map, you could use the following HTML:

<MAP NAME="main">
<AREA SHAPE="rect" COORDS="6,7,102,86" 
HREF="http://www.your_firm.com/geninfo.html" ALT="General Information">
<AREA SHAPE="circle" COORDS="283,118,320,155" 
HREF="http://www.your_firm.com/press.html" ALT="Press Releases">
<AREA SHAPE="polygon" 
COORDS="77,181,59,142,156,145,156,233,134,213,79,233,30,206" 
HREF="http://www.your_firm.com/annrept.html" ALT="Annual Report">
</MAP>

Then, to set up the image map, you would use

<IMG SRC="images/main.gif" USEMAP="#main">

if the map information were in the same file. If the map information were stored in the file maps.html, you would modify the preceding <IMG> tag to read as

<IMG SRC="images/main.gif" USEMAP="http://www.your_firm.com/maps.html#main">

Example: A Navigation Image Map

To use the image in Figure 9.2 as a client-side image map, you first need to set up the map information in an HTML file:

<MAP NAME="navigate">
<AREA SHAPE="rect" COORDS="18,1,108,33" 
HREF="http://www.your_firm.com/geninfo.html" ALT="General Information">
<AREA SHAPE="rect" COORDS="129,1,194,33" 
HREF="http://www.your_firm.com/press.html" ALT="Press Release">
<AREA SHAPE="rect" COORDS="214,1,277,33" 
HREF="http://www.your_firm.com/annrept.html" ALT="Annual Report">
<AREA SHAPE="rect" COORDS="300,1,369,33" 
HREF="http://www.your_firm.com/findata.html" ALT="Financial Data">
<AREA SHAPE="rect" COORDS="382,1,485,33" 
HREF="http://www.your_firm.com/jobs.html" ALT="Job Opportunities">
<AREA SHAPE="rect" COORDS="507,1,581,33" 
HREF="http://www.your_firm.com/calendar.html" ALT="Calendar of Events">
</MAP>

With the map data in place, you can reference it with the <IMG> tag:

<IMG SRC="images/navigate.gif" USEMAP="#navigate">

if the map data is in the same HTML file. Since the same navigation maps are often used on several pages on a site, you might want to put the map data in a single map file and reference the file each time you need the map:

<IMG SRC="images/navigate.gif" USEMAP="maps.html#navigate">

As noted earlier, this is an efficient way to manage image maps that are common to many pages.

Using Server-Side and Client-Side Image Maps Together

Client-side image maps are a great idea because they permit faster image map processing and enhance the portability of your HTML documents. Unfortunately, not all graphical browsers support the client-side image map approach just described. If you're trying to write HTML that is as friendly to as many browsers as possible, you should consider combining server-side and client-side image maps, until all browsers come into compliance with the HTML 3.2 standard.

To combine a server-side image map with a client-side image map for the main page example discussed earlier, you can modify the earlier HTML as follows:

<A HREF="http://www.your_firm.com/maps/main.map">
<IMG SRC="images/searchsites.gif" USEMAP="#main" ISMAP></A>

Flanking the <IMG> tag with <A> and </A> tags makes it point to the Main.map map file on the server. You need to include the ISMAP attribute in the <IMG> tag to let the browser know that the image is linked as a server-side image map as well.

Providing a Text Alternative to an Image Map

When using an image map-in particular, a server-side image map-it is important to provide a text-based alternative to users who have a text-only browser or who have image loading turned off. These users won't even be able to view your image, so the entire image map will be lost on them if a text-based alternative is not supplied.

Additionally, Web robots cannot follow the links set up in a server-side image map. By providing a text-based set of links that replicate the links in the image map, you give the robots a way to better index your pages.

Most sites place their text-based alternatives to an image map just below the image map graphic. Usually the links are in a smaller font size and are separated by vertical bars or some such separator character (see Figure 9.3).

Figure 9.3 : A set of text-based links that duplicate an image map's links is an important courtesy to users.

Image Map Tools

Whether you're creating a server-side or client-side image map, it can be cumbersome determining and typing in all the coordinates of all the points needed to define hot regions. Luckily, programs are available to help you through this process. They let you load your image map image, trace out the hot regions right on the screen, and then write the appropriate map file or HTML file to implement the image map. The following sections describe three of these programs: Map This!, Mapedit, and Web Hotspots.

Map This!

Map This! is a freeware image map tool written by Todd C. Wilson. It runs on 32-bit Windows platforms (95 and NT) only, but that's about the extent of its limitations. Map This! can help you with server-side and client-side image maps, and can load images in both the GIF and JPEG formats. Figure 9.4 shows the Map This! main window with the main page image map graphic loaded.

Figure 9.4 : Map This! is a free-ware image map tool that supports server-side and client-side image maps on graphics in both GIF and JPEG format.

Most of the features of Map This! are accessible through buttons in the main window. The rectangle, circle, and polygon tools occupy the first three buttons in the second row. The circle tool is particularly nice because you can drag out the circle from one point on the circle to the point diametrically opposite to it, instead of trying to start on the exact center of the circle. As you use any of the tools in Map This!, a box at the bottom-left of the window gives you instructions on what to do next. You can enable the shading feature to make the hot regions you define easier to see.

The Area List shown in Figure 9.4 is a floating box that you can activate to show the regions you've defined and what URLs they're linked to. You can also turn on a grid pattern to help you measure hot regions with greater accuracy.

The Map This! testing mode opens up a completely separate window, as shown in Figure 9.5. As you move your mouse pointer over a hot region, its corresponding URL shows up in the box at the bottom left.

Figure 9.5 : As you move your mouse over a hot region in the Map This! test window, the URL you jump to shows up at the bottom left.

Map This! lets you work on multiple images, and you have the choice of cascading or tiling the windows that contain the images. When you're ready to save your work, you can save in CERN or NCSA format for server-side image map files or in HTML format for client-side image maps. Other useful features of Map This! include the following:

• The ability to add points to, or delete points from, polygons
• Color support all the way up to 24-bit color
• The ability to zoom in and out
• A Preferences window where you can set the map type and color choices for outlining and shading hot regions
• A Mapfile Information window where you can specify a default URL, the map title, your name, and other descriptive comments
• Context-sensitive menus accessible by right-clicking the mouse

Mapedit

Mapedit 2.24 is a shareware image map tool produced by Boutell.Com, Inc. This version of Mapedit supports client-side images and targeting of individual frames when using an image map within a framed document.

Using Mapedit is easy. From the File menu, choose Open/Create to begin. In the dialog box that appears, specify whether you are doing a server-side or client-side image map. If you choose server-side, then select either NCSA or CERN formats and specify a name for the map file. If you choose client-side, then tell Mapedit the name of the file to which it should write the HTML code. Finally, tell Mapedit the file containing the image for the image map. When you click OK, the image file is loaded into the Mapedit window, and you're ready to start defining hot regions.

You can choose Rectangle, Circle, or Polygon tools from the Mapedit Tools menu or from the toolbar just below the menus. Each tool lets you trace out a hot region shaped like the name of the tool. To use the Rectangle tool, point your mouse to the upper left corner of the rectangular hot region and click the left mouse button. Then, move your mouse pointer to the lower right corner of the region. As you do so, a black rectangular outline is dragged along with the pointer, eventually opening up to enclose your hot region (see Figure 9.6).

Figure 9.6 : Mapedit lets you trace out hot regions using your mouse.

With the mouse pointer pointing at the lower right corner, left-click the mouse again. When you do, you see a dialog box like the one shown in Figure 9.7. Type the URL that is associated with the hot region you're defining into the dialog box, along with any comments you want to include, and click OK. Mapedit puts this information into the file it's building and is then ready to define another hot region or to save the file and exit.

Figure 9.7 : Once a hot region is defined, Mapedit prompts you for the associated URL and any comments.

Mapedit's Circle and Polygon tools work similarly. With the Circle tool, you place your mouse pointer at the center of the circular region (which is sometimes difficult to estimate!) and left-click. Then, move the pointer to a point on the circle and left-click again to define the region and call up the dialog box. To use the Polygon tool, simply left-click the vertices of the polygon in sequence. When you hit the last unique vertex (that is, the next vertex in the sequence is the first one you clicked), right-click instead to define the region and reveal the dialog box.

Other Mapedit Tool menu options let you move an entire hot region (Move), add points(Add Points), or remove points (Remove Points) from a polygon and test the image map file as it currently stands. The Edit Default URL option, under the File menu, lets you specify a default URL to go to if a user clicks somewhere other than a hot region. Mapedit's test mode (choose Tools, Test+Edit) presents the image map graphic to you and lets you click it. If you click a hot region, the URL dialog box opens and displays the URL associated with the region you clicked.

Web Hotspots

Web Hotspots 2.01 is a shareware image map tool developed by 1Automata. Web Hotspots supports both server-side and client-side image maps and can load graphics in both GIF and JPEG formats. Figure 9.8 shows the Web Hotspots main window. As you can see in the figure, Web Hotspots provides you with buttons that allow you to quickly change between tracing tools.

Figure 9.8 : You can access Web Hotspots tools quickly using buttons in the main window.

In addition to the usual rectangle, circle, and polygon tools, you also get a freeform region tool that enables you to define unusually-shaped hot regions. As you define a region, Web Hotspots shades it for you, making it easy to see in relation to objects in the graphic. The shading feature is illustrated in Figure 9.9.

Figure 9.9 : Web Hotspots shades a hot region as you define it, making it easy to see.

Once a hot region is defined, you can type in the associated URL into the URL edit box near the bottom of the window.

Web Hotspots offers a number of other useful features, beyond its basic functionality, including the following:

• A context-sensitive help box
• A zoom feature that lets you increase or decrease the size of the image
• A testing mode that supports live testing over the Internet (you need to have WinSock installed to do this)
• Image rescale and rotate options
• The ability to move a hot region to the front of the map file or HTML file, giving it precedence over the other regions