JavaScript Bible, Gold Edition part 66 ppsx

498
Part III ✦ Document Objects Reference
One additional technique allows a single link tag to operate for both scriptable
and nonscriptable browsers (NN3+ and IE4+). For nonscriptable browsers, establish
a genuine URL to navigate from the link. Then make sure that the link’s
onClick
event handler evaluates to return false. At click time, a scriptable browser
executes the event handler and ignores the
HREF attribute; a nonscriptable browser
ignores the event handler and follows the link. See the discussion of the generic
onClick event handler in Chapter 15 for more details.
As you design your links, consider building
onMouseOver and onMouseOut event
handlers into your link definitions. The most common applications for these event
handlers are as a means of adjusting the
window.status property or swapping
images. (Early IMG element objects do not have event handlers of their own, so you
must wrap them inside A elements to gain the event handler effect.) Thus, as a user
rolls the mouse pointer atop a link, a descriptive label (perhaps more detailed or
friendly than what the link text or image may indicate) appears in the status line
at the bottom of the window. Whether a user notices the change down there is
another issue, so don’t rely on the status line as a medium for mission-critical
communication. Image swaps, however, are more dramatic and enable a user to
receive visual feedback that the mouse pointer is atop a particular button image.
Thanks to the
onMouseDown event handler in NN4 and IE4, you can even swap the
image when the user presses down with the mouse button atop the link.
Properties
charset
Value: String Read/Write
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5

Compatibility ✓
The charset property represents the HTML 4.0 CHARSET attribute of an A
element. It advises the browser of the character set used by the document to which
the
HREF attribute points. The value is a string of one of the character set codes
from the registry found at
/>character-sets
.
coords
shape
Value: Strings Read/Write
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓
HTML 4.0 provides specifications for A elements that accommodate different
shapes (rect, circle, and poly) and coordinates when the link surrounds an image.
A.coords
499
Chapter 21 ✦ Link and Anchor Objects
Although the coords and shape properties are present for A element objects in
NN6 (as directed by the W3C DOM), active support for the feature is not present in
NN6.
hash
host
hostname
pathname
port
protocol
search
Value: Strings Read/Write
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5

Compatibility ✓✓ ✓✓✓ ✓ ✓✓ ✓
This large set of properties is identical to the same-named properties of the
location object (see Chapter 17). All properties are components of the URL that
is assigned to the link object’s
HREF attribute. Although none of these properties
appear in the W3C DOM specification for the A element object, they survive in
modern browsers for backward compatibility. If you want to script the change of
the destination for a link, try modifying the value of the object’s
href property
rather than individual components of the URL.
Related Item:
location object.
href
Value: String Read/Write
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓✓ ✓✓✓ ✓ ✓✓ ✓
The href property (included in the W3C DOM) is the URL of the destination of
an A element equipped to act as a link. URLs can be relative or absolute.
In IE4+ and NN6, you can turn an anchor object into a link object by assigning a
value to the
href property even if the A element has no HREF attribute in the HTML
that loads from the server. Naturally, this conversion is temporary, and it lasts only
as long as the page is loaded in the browser. When you assign a value to the
href
property of an A element that surrounds text, the text assumes the appearance of a
link (either the default appearance or whatever style you assign to links).
Related Item:
location object.
A.href
500

Part III ✦ Document Objects Reference
hrefLang
Value: String Read/Write
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓
The hrefLang property advises the browser (if the browser takes advantage of
it) about the written language used for the content to which the A element’s
HREF
attribute points. Values for this property must be in the form of the standard
language codes (for example,
en-us for U.S. English).
Methods
Value: String Read/Write
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓✓ ✓
The Methods property (note the uppercase “M”) represents the HTML 4.0 METHODS
attribute for an A element. Values for this attribute and property serve as advisory
instructions to the browser about which HTTP method(s) to use for accessing the
destination document. This is a rare case in which an HTML 4.0 attribute is not
echoed in the W3C DOM. In any case, while IE4+ supports the property, the IE
browsers do nothing special with the information.
mimeType
Value: String Read-Only
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓✓ ✓
Introduced in IE4 (but not IE4/Mac), the mimeType property is still present in IE5
but apparently is no longer supported. The HTML 4.0 and W3C DOM specifications
define a
TYPE attribute and type property instead. Perhaps this property was
intended as an advisory to allow the browser to “know” ahead of time the MIME

type of the destination document. In such a scenario, different MIME types can
trigger scripts to use different cursors while hovering atop the link. The property
has no actual control over the MIME type of the destination document.
Related Item:
A.type property.
A.mimeType
501
Chapter 21 ✦ Link and Anchor Objects
name
Value: String Read/Write
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓✓ ✓ ✓ ✓
While a NAME attribute is optional for an A element serving solely as a link object,
it is required for an anchor object. This value is exposed to scripting via the
name
property. While it is unlikely you will need to change the value by scripting, you can
use this property as a way to identify a link object from among the
document.links arrays in a repeat loop. For example:
for (var i = 0; i < document.links.length; i++) {
if (document.links[i].name == “bottom” {
// statements dealing with the link named “bottom”
}
}
nameProp
Value: String Read-Only
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓✓ ✓
The IE-specific nameProp property is a convenience property that retrieves the
segment of the HREF to the right of the rightmost forward slash character of the
URL. Most typically, this value is the name of the file from a URL. But if the URL also

includes a port number, that number is returned as part of the
nameProp value.
protocolLong
Value: String Read-Only
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓✓ ✓
The IE-specific protocolLong property returns a verbose rendition of the
protocol property as indicated in the A element’s HREF attribute. For example,
if the
HREF attribute points to an http: protocol, the protocolLong property
returns
HyperText Transfer Protocol. Introduced in IE4 (but not IE4/Mac),
the
protocolLong property is still present in IE5 but apparently is no longer
supported.
A.protocolLong
502
Part III ✦ Document Objects Reference
rel
rev
Value: String Read/Write
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓✓✓✓
The rel and rev properties define relationships in the forward and back direc-
tions with respect to the destination document of the A element. Browsers have
yet to exploit most of the potential of these attributes and properties.
A long list of values are predefined for these properties, based on the corres-
ponding attribute values specified in HTML 4.0. If the browser does nothing with a
particular value, the value is ignored. You can string together multiple values in a
space-delimited list inside a single string. Accepted values are as follows:

alternate contents index start
appendix copyright next stylesheet
bookmark glossary prev subsection
chapter help section
target
Value: String Read/Write
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓✓ ✓✓✓ ✓ ✓✓ ✓
An important property of the link object is the target. This value reflects the
window name supplied to the
TARGET attribute in the A element.
You can temporarily change the target for a link. But, as with most transient
object properties, the setting does not survive soft reloads. Rather than altering the
target this way, you can safely force the target change by letting the
HREF attribute
call a
javascript:functionName() psuedo-URL in which the function assigns a
document to the desired
window.location. If you have done extensive HTML
authoring before, you will find it hard to break the habit of relying on the
TARGET
attribute.
Related Item:
document.links property.
A.target
503
Chapter 21 ✦ Link and Anchor Objects
text
Value: String Read-Only
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5

Compatibility ✓
Between the start and end tags of a link goes the text (or image) that is high-
lighted in the distinguishing link color of the document. Navigator 4 enables you to
read that text with the
link.text property. This property is read-only. For later
browsers, use the IE4+ and/or W3C DOM syntax for reading the text node
(
innerText, innerHTML, or nodeValue) property of the A element.
This property was not implemented in releases of Navigator 4 prior to version 4.02.
type
Value: String Read/Write
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓
The type property represents the HTML 4.0 TYPE attribute, which specifies the
MIME type for the content of the destination document to which the element’s
HREF
attribute points. This is primarily an advisory property for browsers that wish to,
say, display different cursor styles based on the anticipated type of content at the
other end of the link. Thus far, browsers do not take advantage of this feature.
However, you can assign MIME type values to the attribute (for example,
video/
mpeg
) and let scripts read those values for making style changes to the link text
after the page loads. IE4+ implements this property as the
mimeType property.
Related Item:
A.mimeType property.
urn
Value: String Read/Write
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5

Compatibility ✓✓ ✓
The urn property represents the IE-specific URN attribute, which enables authors
to use a URN (Uniform Resource Name) for the destination of the A element. (See
Note
A.urn
504
Part III ✦ Document Objects Reference
for information about URNs.) This
property is not in common use.
x
y
Value: Integer Read-Only
Nav2 Nav3 Nav4 Nav6 IE3/J1 IE3/J2 IE4/J3 IE5
Compatibility ✓
Your Navigator 4 script can retrieve the x and y coordinates of a link object (the
top-left corner of the rectangular space occupied by the linked text or image) via
the
link.x and link.y properties. With IE4+ and NN6, you can get the coordinates
of a typical link via the A element’s
offsetLeft and offsetTop properties.
✦✦✦
A.x
Image, Area,
and Map Objects
F
or NN3+ and IE4+ browsers, images and areas — those
items created by the
<IMG> and <AREA> tags — are first-
class objects that you can script for enhanced interactivity.
You can swap the image displayed in an

<IMG> tag with other
images (restricted to images of the same size in NN3 and NN4),
perhaps to show the highlighting of an icon button when the
cursor rolls atop it. And with scriptable client-side area maps,
pages can be smarter about how they respond to users’ clicks
on image regions.
One further benefit afforded scripters is that they can
preload images into the browser’s image cache as the page
loads. With cached images, the user experiences no delay
when the first swap occurs.
Image and IMG Element Objects
For HTML element properties, methods, and event handlers,
see Chapter 15.
Properties Methods Event Handlers
align onAbort
alt onError
border onLoad
complete
dynsrc
fileCreatedDate
fileModifiedDate
fileSize
fileUpdatedDate
height
href
hspace
Continued
22
22
CHAPTER

✦✦✦✦
In This Chapter
How to precache
images
Swapping images
after a document
loads
Creating interactive,
client-side image
maps
✦✦✦✦
506
Part III ✦ Document Objects Reference
Properties Methods Event Handlers
isMap
longDesc
loop
lowsrc
name
nameProp
protocol
src
start
useMap
vspace
width
x
y
Syntax
Creating an image object:

imageName = new Image([pixelWidth, pixelHeight])
Accessing IMG element and image object properties or methods:
(NN3+/IE4+) [window.]document.imageName. property | method([parameters])
(NN3+/IE4+) [window.]document.images[index]. property | method([parameters])
(NN3+/IE4+) [window.]document.images[“imageName”]. property |
method([parameters])
(IE4+) [window.]document.all.elemID.property | method([parameters])
(IE5+/NN6+) [window.]document.getElementById(“elemID”).property |
method([parameters])
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓✓✓(✓) ✓✓ ✓
About this object
Before getting into detail about images as objects, it’s important to understand
the distinction between instances of the static
Image object and IMG element
objects. The former exist only in the browser’s memory without showing anything
to the user; the latter are the elements on the page generated via the
<IMG> (or
nonsanctioned, but accepted,
<IMAGE>) tag. Scripts use Image objects to precache
IMG
507
Chapter 22 ✦ Image, Area, and Map Objects
images for a page, but Image objects obviously have fewer applicable properties,
methods, and event handlers because they are neither visible on the page nor
influenced by tag attributes.
IMG elements have been in the HTML vocabulary since the earliest days, but
Netscape Navigator 3 was the first to treat them like first-class objects along with
the companion
Image object for precaching images. Internet Explorer 3.01 for

the Macintosh includes a partial implementation of both objects (to allow image
precaching and swapping), and all flavors of IE4+ treat IMG elements as true docu-
ment objects. The primary advantage of treating IMG elements as objects is that
scripts can change the image that occupies the IMG object’s space on the page,
even after the document has loaded and displayed an initial image. The key to this
scriptability is the
src property of an image.
In a typical scenario, a page loads with an initial image. That image’s tags specify
any of the extra attributes, such as
HEIGHT and WIDTH (which help speed the render-
ing of the page), and specify whether the image uses a client-side image map to
make it interactive. (See the
AREA object later in this chapter.) As the user spends
time on the page, the image can then change (perhaps in response to user action or
some timed event in the script), replacing the original image with a new one in the
same space. In browsers prior to IE4 and NN6 that support the IMG element object,
the height and width of the initial image that loads into the element establishes a
fixed-sized rectangular space for the image. Attempts to fit an image of another size
into that space forces the image to scale (up or down, as the case may be) to fit the
rectangle. But in IE4+ and NN6+, a change in the image’s size is reflected by an auto-
matic reflow of the page content around the different size.
The benefit of the separate
Image object is that a script can create a virtual
image to hold a preloaded image. (The image is loaded into the image cache but
the browser does not display the image.) The hope is that one or more unseen
images will load into memory while the user is busy reading the page or waiting
for the page to download. Then, in response to user action on the page, an image
can change instantaneously rather than forcing the user to wait for the image to
load on demand.
To preload an image, begin by assigning a new, empty image object to a global

variable. The new image is created via the constructor function available to the
Image object:
var imageVariable = new Image(width, height)
You help the browser allocate memory for the image if you provide the pixel
height and width of the precached image as parameters to the constructor function.
All that this statement does is create an object in memory whose properties are all
empty. To force the browser to load the image into the cache, assign an image file
URL to the object’s
src property:
var oneImage = new Image(55,68)
oneImage.src = “neatImage.gif”
As this image loads, you see the progress in the statusbar just like any image.
Later, assign the
src property of this stored image to the src property of the IMG
element object that appears on the page:
document.images[“someImage”].src = oneImage.src
IMG