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 ftp://ftp.isi.edu/in-notes/iana/assignments/ 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 http://www.ietf.org/rfc/rfc2141.txt 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 . 498 Part III ✦ Document Objects Reference One additional technique allows a single link tag to operate. 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. 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