JavaScript Bible, Gold Edition part 66 ppsx

coords shape NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 HTML 4.0 provides specifications for A elements that accommodate different shapes rect, circle, and poly and coordinates when the

Trang 1

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 HREFattribute; a nonscriptable browser ignores the event handler and follows the link See the discussion of the generic onClickevent handler in Chapter 15 for more details

As you design your links, consider building onMouseOverand onMouseOutevent handlers into your link definitions The most common applications for these event handlers are as a means of adjusting the window.statusproperty 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 onMouseDownevent 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

NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5

The charsetproperty represents the HTML 4.0 CHARSETattribute of an A element It advises the browser of the character set used by the document to which the HREFattribute points The value is a string of one of the character set codes from the registry found at ftp://ftp.isi.edu/in-notes/iana/assignments/ character-sets

coords

shape

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

Trang 2

Although the coordsand shapeproperties 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

This large set of properties is identical to the same-named properties of the

locationobject (see Chapter 17) All properties are components of the URL that

is assigned to the link object’s HREFattribute 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 hrefproperty

rather than individual components of the URL

Related Item:locationobject

href

The hrefproperty (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 hrefproperty even if the A element has no HREFattribute 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:locationobject

A.href

Trang 3

The hrefLangproperty 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-usfor U.S English)

Methods

The Methodsproperty (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

Introduced in IE4 (but not IE4/Mac), the mimeTypeproperty is still present in IE5 but apparently is no longer supported The HTML 4.0 and W3C DOM specifications define a TYPEattribute and typeproperty 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.typeproperty

A.mimeType

Trang 4

While a NAMEattribute 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.linksarrays 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

The IE-specific namePropproperty 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 namePropvalue

protocolLong

The IE-specific protocolLongproperty returns a verbose rendition of the

protocolproperty as indicated in the A element’s HREFattribute For example,

if the HREFattribute points to an http:protocol, the protocolLongproperty

returnsHyperText Transfer Protocol Introduced in IE4 (but not IE4/Mac),

theprotocolLongproperty is still present in IE5 but apparently is no longer

supported

A.protocolLong

Trang 5

rev

The reland revproperties 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:

target

An important property of the link object is the target This value reflects the window name supplied to the TARGETattribute 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 HREFattribute 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.linksproperty

A.target

Trang 6

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.textproperty 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

The typeproperty represents the HTML 4.0 TYPEattribute, 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 mimeTypeproperty

Related Item:A.mimeTypeproperty

urn

The urnproperty represents the IE-specific URNattribute, which enables authors

to use a URN (Uniform Resource Name) for the destination of the A element (See

Note

A.urn

Trang 7

http://www.ietf.org/rfc/rfc2141.txtfor information about URNs.) This property is not in common use

x

y

Nav2 Nav3 Nav4 Nav6 IE3/J1 IE3/J2 IE4/J3 IE5

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.xand link.yproperties With IE4+ and NN6, you can get the coordinates

of a typical link via the A element’s offsetLeftand offsetTopproperties

A.x

Trang 8

Image, Area,

and Map Objects

For 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

complete

dynsrc

fileCreatedDate

fileModifiedDate

fileSize

fileUpdatedDate

height

href

hspace

Continued

22

In This Chapter

How to precache images

Swapping images after a document loads

Creating interactive, client-side image maps

Trang 9

Properties Methods Event Handlers

isMap longDesc loop lowsrc name nameProp protocol src start useMap vspace width x y

Syntax

Creating an imageobject:

imageName = new Image([pixelWidth, pixelHeight])

Accessing IMG element and imageobject 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])

About this object

Before getting into detail about images as objects, it’s important to understand the distinction between instances of the static Imageobject 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 Imageobjects to precache

IMG

Trang 10

images for a page, but Imageobjects 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 Imageobject 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 eledocu-ments 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 srcproperty 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 HEIGHTand 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 AREAobject 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 Imageobject 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

Imageobject:

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 srcproperty:

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 srcproperty of this stored image to the srcproperty of the IMG

element object that appears on the page:

document.images[“someImage”].src = oneImage.src

IMG

Định dạng
Số trang	10
Dung lượng	178,55 KB