anchors Array

You can reference the anchors in your code via the anchors array. This array contains an entry for each <A> tag containing a NAME attribute in a document, in source order. If a document contains three named anchors, for example, these anchors are reflected as document .anchors[0], document.anchors[1], and document.anchors[2]. You can use this array in one of two ways, exactly like you use the links array or the forms array:

document.anchors[index]
document.anchors.length

Each element of the document.anchors array holds a null value and does not feature any methods or properties. The value of document.anchors[0], for example, is null, regardless of whether there are anchors in the document. The anchors array does not play a role in any script, but its length property occasionally does. If you use a systematic naming scheme for all anchors in a document, you can take advantage of the length property (document.anchors.length). Suppose a document contains a variable number of anchors. You can name these anchors anchor0, anchor1, anchor2, and so forth, or, alternatively, Tomer0, Tomer1, and Tomer2, if you so desire. The latter anchors would use the following syntax:

<A … NAME="Tomer0" …></A>
<A … NAME="Tomer1" …></A>
<A … NAME="Tomer2" …></A>

Take a look at the following function:

function goAnchor(num) {
  if (num >= document.anchors.length)
alert("Anchor does not exist!")
  else
location.hash = "Tomer" + num
}

This function accepts an existing anchor’s index and scrolls the page to that anchor by assigning its name to the location.hash property. It also demonstrates a possible usage of the anchors array, or its length property, to be exact. See Chapter 19, URLs and JavaScript, for details on the location.hash property.

Link and Area Event Handlers

Anchors do not feature any event handlers, but links and image map areas do provide them. Some of the event handlers are very useful, so it is important that you know how to use them.

Calling Event Handlers Explicitly

Since the document.links array holds an entry for every link and image map area in a document, it is fairly straightforward to explicitly call an event handler for a specific link or area by assigning it to the corresponding array element. You can use the following statement to explicitly call the event handler doSomething() for the first link or area (whichever is first in source order):

document.links[0].onmouseover = doSomething

onClick

You can add an onClick event handler in the following fashion:

<A … onClick="validJavaScriptCode">
<AREA … onClick="validJavaScriptCode">

A click event associated with a Link object or an Area object occurs when the user clicks the content of the link, which can be plain text, an image, and so forth. In the case of an Area object, the link content is (usually) a portion of an image.

The JavaScript statements you specify for the onClick event handler are executed prior to loading the URL defined by the HREF attribute. They can be used to do any last-minute preparations.

Usually, you simply want a link or image map area to execute a JavaScript code when the user clicks it. You can accomplish this task by simply using a URL based on a javascript: scheme with the HREF attribute. When the user clicks it, the following link calls a function named register:

<A HREF="javascript:register()">Register Profile</A>

If you wish to create a link that does not respond at all to a link but still enables onMouseOver and onMouseOut event handlers, you can use the void operator (only compatible with Netscape Navigator 3.0 and above):

<A HREF="javascript:void(0)">Register Profile</A>