Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

Example: A Navigation Imagemap

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

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

<MAP NAME=“navigate”>
<AREA SHAPE=“rect” COORDS=“1,1,112,36”
 HREF=“<http://www.server.com/index.html>” ALT=“Home Page”>
<AREA SHAPE=“rect” COORDS=”113,1,224,36”
 HREF=“<http://www.server.com/new.html>” ALT=“What’s New”>
<AREA SHAPE=“rect” COORDS=“225,1,335,36”
 HREF=“<http://www.server.com/info.html>” ALT=“Information”>
<AREA SHAPE=“rect” COORDS=“336,1,447,36”
 HREF=“<http://www.server.com/search/index.html>” ALT=“Search”>
<AREA SHAPE=“rect” COORDS=“448,1,560,36”
 HREF=“<http://www.server.com/contact.html>” ALT=“Contact Us”>
</MAP>

With the map data in place, you can reference it with the <IMG> tag if the map data is in the same HTML file:

<IMG SRC=“images/navigate2.gif” USEMAP=“#navigate”>

FIGURE 4.2  A footer graphic frequently supports navigation options from each page in a site.

Because 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/navigate2.gif” USEMAP=“maps.html#navigate”>

As noted earlier, this is an efficient way to manage imagemaps common to many pages.

Server-Side Imagemaps

A server-side imagemap is one in which the server determines which document should be loaded, based on where the user clicked the imagemap. To make this determination, the server needs the following information:

•  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 a 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 whether the user’s click corresponds to a 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 the map file.

Additionally, you need two other “ingredients” to complete a server-side imagemap:

•  An image—An imagemap is like any other graphic in that you need to have a GIF or a JPEG file that contains the image.

•  Proper setup in your HTML file—When you place the imagemap graphic, you use the <IMG> tag with a special attribute to alert the browser that the image is to be used as a server-side imagemap.

As an HTML author, you need to be most concerned about two of the items just listed: the map file and the setup in the HTML file. The next two sections discuss these aspects of creating an imagemap.

Preparing the Map File

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

The following list identifies basic imagemap shape keywords and their required coordinates:

•  rect—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—Indicates that the hot region is circular. 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—Indicates that the hot region is a polygon. To specify the polygon, you need to provide a list of coordinates for all the polygon’s vertices. A polygonal region can have as many as 100 vertices. The active region is the area within the polygon.

•  point—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 imagemap graphic. A point is considered active if the click occurs closest to that point on the graphic, yet not within another active region.

•  default—A catch-all that defines all areas of an imagemap graphic that are not specified by any other active region.

	An imagemap definition file should, whenever possible, be configured with a default HTML link. The default link takes the user to an area that isn’t designated as being an active link. This URL should provide the user with feedback or helpful information about using that particular imagemap.