HTML The Definitive Guide (53 page)

The browser automatically sends the x,y position of the mouse (relative to the upper-left corner of the image) to the server when the user clicks somewhere on the ismap image. Special server software (the
cgi-bin
images/map2
program in the example) may then use those coordinates to determine a response.

The usemap attribute provides a
client-side
image map mechanism that effectively eliminates server-side processing of the mouse coordinates and its incumbent network delays and problems. Using special

For example, the following source specially encodes the 100 × 100-pixel map2.gif image into four segments, each of which, if clicked by the user, links to a different document. Also notice that we've included, validly, the ismap image map processing capability in the example tag so that users of other, usemap-incapable browsers have access to the alternative, server-side mechanism to process the image map:

...

Geographical maps make excellent ismap and usemap examples: browsing a nationwide company's pages, for instance, the user might click on his or her home town on a map to get the addresses and phone numbers for nearby retail outlets. The advantage of the usemap client-side image map processing is that it does not require a server or special server software and so, unlike the ismap mechanism, can be used in non-web (networkless) environments, such as local files or CD-ROM.

Please read our more complete discussion of anchors and links, including image maps within links, in section 7.5.

5.2.6.15 The class, dir, event, id, lang, style, and title attributes
Several nearly universal attributes give you a common way to identify (title) and label (id) the image tag's contents for later reference or automated treatment; to change the contents' display characteristics (class, style); and to reference the language (lang) used and related direction the text should flow (dir). And, of course, there are all the user events that may happen in and around the tagged contents that the browsers senses and that you may react to via an on-event attribute and some
programming. [Inline Styles: The style Attribute, 9.1.1]
[Style Classes, 9.2.4]

Of these many HTML 4.0 attributes, id is the most important. It lets you label the image for later access by a program or
browser operation (see Chapter 13, Executable Content).
[The id attribute, 4.1.1.4]

The remaining attributes have questionable meaning in context with . Granted, there are a few style sheet options that may influence an image's display, and a title is good to include, although alt is better. And it's hard to imagine what the influence of language (lang) or its presentation direction (dir) might have on an image.
[The dir attribute, 3.5.1.1] [The lang

attribute, 3.5.1.2]
[The title attribute, 4.1.1.5]

5.2.6.16 The name, onAbort, onError, onLoad and other event attributes
There are four attributes currently supported by Netscape that enables you to use JavaScript to manipulate the image.

The first is the name attribute. Now redundant with the HTML 4.0 standard id attribute, name lets you label the image so that it can be referenced by a JavaScript applet. For example: lets you later refer to that picture of a kumquat as simply "kumquat" in a JavaScript applet perhaps to erase or otherwise modify it. You cannot individually manipulate an image with JavaScript if it is not named or doesn't have an associated id.

The other three attributes let you provide some special JavaScript event handlers. The value of the attribute is a chunk of JavaScript code, enclosed in quotation marks; it may consist of one or more JavaScript expressions, separated by semicolons.

Netscape invokes the onAbort event handler if the user stops loading an image, usually by clicking the browser's "stop"

button. You might, for instance, use an onAbort message to warn users if they stop loading some essential image, such as an image map (see section 6.5): The onError attribute is invoked if some error occurs during the loading of the image, but not for a missing image or one that the user chose to stop loading. Presumably, the applet could attempt to recover from the error or load a different image in its place.

Netscape executes the JavaScript code associated with the tag's onLoad attribute right after the browser successfully loads and displays the image.

See section 13.3.3 for more information about JavaScript and event handlers.

5.2.6.17 Combining attributes
You may combine any of the various standard and extension attributes for images where and when they make sense. The order for inclusion of multiple attributes in the tag is not important, either. Just be careful not to use redundant attributes or you won't be able to predict the outcome.