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

CHAPTER 4
Imagemaps

by Eric Ladd

In this chapter

What Are Imagemaps? 138

Client-Side Imagemaps 138

Server-Side Imagemaps 143

Using Server-Side and Client-Side Imagemaps Together 147

Providing a Text Alternative to an Imagemap 148

Imagemap Tools 148

What Are Imagemaps?

If you use a graphical browser, you have 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 “multilinked” and can take you to a number of places. Such a multilinked image is called an imagemap.

The challenge in preparing an imagemap is defining which parts of the image are linked to which URLs. Linked regions in an imagemap 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. After 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 and client-side imagemaps. Either approach is easy to implement after you know how to define the hot regions.

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

Client-Side Imagemaps

Client-side imagemaps are a great idea because they permit faster imagemap processing and enhance the portability of your HTML documents. Client-side imagemaps involve sending the map data to the client as part of an HTML file rather than having the client contact the server each time the map data is needed. This process may add slightly to the transfer time of the HTML file, but the resultant increased efficiency is well worth it.

The movement toward client-side imagemaps has been fueled by the promise of a number of advantages, including the following:

•  Immediate processing—After 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 from a hard drive or a CD-ROM drive, no server is available to do any imagemap computations. Client-side imagemaps enable imagemaps to be used when you’re looking at pages offline.

•  No special configurations based on server program—Client-side imagemaps 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 imagemaps, because no server is involved.

Previously, the only disadvantage of using client-side imagemaps was that it wasn’t standard HTML and, therefore, not implemented by all browsers. Now that client-side imagemaps have been adopted as part of the HTML 4.0 recommendation, you would be hard pressed to find a graphical browser that does not support them.

Creating a client-side image map involves three steps:

1.  Create the graphic that you want to make into an imagemap.

2.  Define the hot regions for the graphic and place that information between the <MAP> and </MAP> tags in your HTML document.

3.  Use the <IMG> tag to insert the graphic for the imagemap and link it to the hot region information you defined in the <MAP> section.

Defining a Map

A client-side imagemap is defined using HTML tags and attributes, usually right in the HTML file that contains the document with the imagemap. 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 imagemap data a unique identifier that can be used when referencing the data.

Inside the <MAP> and </MAP> tags, hot regions are defined by standalone <AREA> tags—one <AREA> tag for each hot region. The <AREA> tag takes the attributes shown in Table 4.1.