Chapter 23
Links, Anchors, and Image Maps

Defining a Link

Assuming you know what a link is, here is the general HTML syntax:

<A HREF="locationOrURL"
[NAME="anchorName"]
[TARGET="windowName"]>
linkText
</A>

The HREF attribute defines the document or anchor to which you are linking. The NAME attribute specifies a tag that becomes an available hypertext target within the current document. If this attribute is present, the link object is also an anchor object. The TARGET attribute specifies the window where the linked document should load (e.g., a name of a window, a name of a frame, a special literal frame name such as _top, _parent, _self, and _blank).

You can create a link with a plain HTML tag as shown above, but you can also use JavaScript for that. The following script segment demonstrates how to create a link with JavaScript:

document.write(linkText.link(hrefAttribute))

The preceding statement uses the link() method of the String object. See Chapter 16, Handling Strings, for instructions on using this method.

Another obvious way to create a link with JavaScript is by printing the plain HTML syntax via document.write in the following form:

document.write('<A HREF="locationOrURL" [NAME="anchorName"]
[TARGET="windowName"]>linkText </A>')

Although this syntax works on a JavaScript-enabled browser, it contains several flaws that will spoil the appearance of the page when viewed with a browser that does not support JavaScript. The problem is that greater than (>) characters in a script terminate code hiding. (See “Problems with Code Hiding” in Chapter 3 for details on a workaround technique.)

Defining an Anchor

The plain HTML definition of an anchor is as follows:

<A [HREF=locationOrURL]
 NAME="anchorName"
 [TARGET="windowName"]>
 anchorText
</A>

The attributes are the same as those of a link.

You can also use the String object’s anchor() method to create an anchor using the following format:

text.anchor(nameAttribute)

Defining an Image Map (area)

The general syntax of a client-side image map is as follows:

<MAP NAME="mapName">
 <AREA
 [NAME="areaName"]
 COORDS="x1,y1,x2,y2,..." | "x-center,y-center,radius"
 HREF="location"
 [SHAPE="rect" | "poly" | "circle" | "default"]
 [TARGET="windowName"]>
</MAP>

The first NAME attribute specifies the name of the image map that contains various areas, whereas the second one specifies the name of a single area in the image map. An image map can consist of any number of areas. The COORDS attribute specifies the coordinates of a specific area in a map. This attribute consists of either four coordinates, if the area is defined as a rectangle (an x and y for the top left and bottom right corners), or three coordinates, if the area is a circle (x and y for the center and the radius). HREF specifies the URL of the document to load when the user clicks the area. Any area of the image map that does not have this attribute does not act as a hypertext link. You can use any scheme (protocol) for the location, including a JavaScript statement via javascript:. The SHAPE attribute determines the shape of an area in an image map. If not specified, the shape defaults to rect. TARGET specifies the window or frame in which the destination document is loaded. See the section on link definition for additional information regarding this attribute.

links Array

The only way to reference a link object in your code is by using the links array. This array is similar to the forms array. It is also a property of the document object, so you can access this array in the following fashion:

[window.]document.links

This links array contains an entry for each Link (<A HREF="…">) and Area (<AREA HREF="…">) object in the document. Suppose you have a document containing three links, for example. You can reference these links using the following syntax:

document.links[0]
document.links[1]
document.links[2]

These references can equally apply to a document with three Area objects (within a single or multiple image maps), as well as for a document with two links and one image map area. The total number of qualifying links and image map areas is reflected by the length property of the array:

document.forms.length

This is probably the most useful link-related property. Elements in the links array are obviously read-only, but assigning a value to a given element does not cause an error—it simply doesn’t work.