First, notice the HTML tag that creates the image:

<IMG SRC="img23-1.gif" HEIGHT=69 WIDTH=214 ALT="HTML" BORDER=0
USEMAP="#html_map">

Except for the last one, all attributes are self-explanatory. USEMAP specifies the name of the image map definition (<MAP>) for the image, preceded by a hash character. The image map definition itself uses the following opening tag:

<MAP NAME="html_map">

You should set the name of the map as shown above, or else the image won’t be able to refer to it. There are basically four areas in Figure 23-1’s image map, one for each letter of the “HTML” banner. Since, except for the triggered message and coordinates, all four areas are alike, only one will be discussed here. Let’s take a look at the last area:

<AREA
NAME="L"
COORDS="161, 0, 214, 69"
HREF="javascript:alert('Language')"
SHAPE="rect"
onMouseOver="window.status = 'Language'; return true"
onMouseOut="window.status = ''; return true">

First, notice that this area is defined as a rectangle (SHAPE="rect"). The x and y coordinates of the upper left corner are 161 and 0, respectively. Coordinates are measured in pixels starting at (0, 0), the first pixel in the image. The x and y coordinates of the bottom right corner are 214 and 69, respectively, which are the HEIGHT and WIDTH attributes of the image. When the user places the mouse pointer over this area, the status bar displays the string “Language” (for “L”) (the string is assigned to the status bar property), and, as required by Navigator, the Boolean value true is returned. When the user removes the mouse from this area, the status bar is blanked (assigned an empty string). Since the onMouseOver event handler of the destination area immediately overtakes the onMouseOut operation of the source area, the user usually won’t notice this interim state when moving the pointer to one of the adjacent image map areas. When the user removes the mouse pointer from this area to outside of the entire image, the status bar is cleared and remains empty, until either a different value is explicitly assigned to the status bar, or the mouse moves back into the image map area. When the user clicks this area, the location specified in HREF is loaded, and, since the value of this attribute is a JavaScript statement preceded by the javascript:

scheme, it does not load a new document but rather pops up an alert dialog box with the string Language.

Link and Area Properties

Location-Equivalent Properties

Most of the properties that belong to a Link or an Area object (document.links[index]) are associated with the URL of the HREF definition. These are all properties of the window.location object, to which a full chapter is dedicated. Only a short description of each property will be given here. The only way to reference a property of a Link or an Area object is to use the following syntax:

document.links.propertyName

Note that links do not have any methods.

Here is the equivalence list between the properties of document.links and those of window.location:

• hash specifies an anchor name in the URL.
• host specifies the hostname:port portion of the URL.
• hostname specifies the host and domain name, or IP address, of a network host.
• href specifies the entire URL.
• pathname specifies the url-path portion of the URL.
• port specifies the communications port that the server uses for communications (80 by default).
• protocol specifies the beginning of the URL, including the colon (also known as the scheme).
• search specifies a query.