518 Part III ✦ Document Objects Reference start Value: String Read/Write NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ The start property works in conjunction with video clips viewed through the IMG element in IE4+. By default, a clip starts playing (except on the Macintosh) when the image file opens. This follows the default setting of the start property: “fileopen”. Another recognized value is “mouseover”, which prevents the clip from running until the user rolls the mouse pointer atop the image. Example on the CD-ROM Related Items: IMG.dynsrc, IMG.loop properties. useMap Value: Identifier String Read/Write NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ The useMap property represents the USEMAP attribute of an IMG element, pointing to the name assigned to the AREA element in the page (see Listing 22-7 on CD-ROM). This AREA element contains the details about the client-side image map (described later in this chapter). The value for the useMap property must include the hash mark that defines an internal HTML reference on the page. If you need to switch among two or more image maps for the same IMG element (for example, you swap images or the user is in a different mode), you can define multiple MAP ele- ments each with a different name. Then change the value of the useMap property for the IMG element object to associate a different map with the image. Related Item: isMap property. vspace See hspace. width See height. On the CD-ROM IMG.width 519 Chapter 22 ✦ Image, Area, and Map Objects x y Value: Integer Read-Only NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ An NN4 script can retrieve the x and y coordinates of an IMG element (the top-left corner of the rectangular space occupied by the image) via the x and y properties. These properties are read-only. They were supplanted in NN6 via the offsetLeft and offsetTop properties of any element. Even without Dynamic HTML, you can use the information from these properties to help scroll a NN4 document to a precise position (with the window.scrollTo() method) as a navigational aid in your page. Due to the different ways each operating system platform renders pages and the different sizes of browser windows, you can dynamically locate the position of an image (in other words, scroll the document) given the current client conditions. Example on the CD-ROM Related Items: IMG.offsetLeft, IMG.offsetTop properties; IMG. scrollIntoView() , window.scrollTo() methods. Event handlers onAbort onError NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓✓✓ Your scripts may need to be proactive when a user clicks the Stop button while an image loads or when a network or server problem causes the image transfer to fail. Use the onAbort event handler to activate a function in the event of a user clicking the Stop button; use the onError event handler for the unexpected transfer snafu. In practice, these event handlers don’t supply all the information you may like to have in a script, such as the filename of the image loading at the time. If such information is critical to your scripts, then the scripts need to store the name of a currently loading image to a variable before they set the image’s src property. You also don’t know the nature of the error that triggers an error event. You can treat On the CD-ROM IMG.onAbort 520 Part III ✦ Document Objects Reference such problems by forcing a scripted page to reload or by navigating to an entirely different spot in your Web site. Example on the CD-ROM onLoad NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓✓✓ An IMG object’s onLoad event handler fires when one of three actions occurs: an image’s LOWSRC image finishes loading; in the absence of a LOWSRC image specifi- cation, the SRC image finishes loading; or when each frame of an animated GIF (GIF89a format) appears. It’s important to understand that if you define a LOWSRC file inside an <IMG> tag, the IMG object receives no further word about the SRC image having completed its loading. If this information is critical to your script, verify the current image file by checking the src property of the image object. Be aware, too, that an IMG element’s onLoad event handler may fire before the other elements on the page have completed loading. If the event handler function refers to other elements on the page, the function should verify the existence of other elements prior to addressing them. The onLoad event handler for images appears to be broken in Navigator 4. Example (with Listing 22-5) on the CD-ROM Related Items: IMG.src, IMG.lowsrc properties. AREA Element Object For HTML element properties, methods, and event handlers, see Chapter 15. Properties Methods Event Handlers alt coords hash host On the CD-ROM Note On the CD-ROM AREA 521 Chapter 22 ✦ Image, Area, and Map Objects Properties Methods Event Handlers hostname href noHref pathname port protocol search shape target Syntax Accessing AREA element object properties: (NN3+/IE4+) [window.]document.links[index].property (IE4+) [window.]document.all.elemID.property | method([parameters]) (IE4+) [window.]document.all.MAPElemID.areas[index].property | method([parameters]) (IE5+/NN6+) [window.]document.getElementById(“MAPElemID).areas[index]. 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 Document object models treat an image map area object as one of the link (A element) objects in a document (see the anchor object in Chapter 21). When you think about it, such treatment is not illogical at all because clicking a map area generally leads the user to another document or anchor location in the same document — a hyperlinked reference. Although the HTML definitions of links and map areas differ greatly, the earliest scriptable implementations of both kinds of objects had nearly the same properties and event handlers. Therefore, to read about the details for these items, refer to the discussion about the link object in Chapter 21. The one difference is that in NN3 and NN4, a map area object does not have the same full array of mouse event handlers — you can count upon having only the onClick (NN4+), onMouseOver, and onMouseOut event handlers for those browsers. Starting with IE4 and NN6, all AREA element attributes are accessible as scriptable properties. Moreover, you can change the makeup of client-side image map areas by AREA 522 Part III ✦ Document Objects Reference way of the MAP element object. The MAP element object contains an array of AREA element objects nested inside. You can remove, modify, or add to the AREA elements inside the MAP element. Client-side image maps are fun to work with, and they have been well documented in HTML references since Netscape Navigator 2 introduced the feature. Essentially, you define any number of areas within the image based on shape and coordinates. Many graphics tools can help you capture the coordinates of images that you need to enter into the COORDS attribute of the <AREA> tag. If one gotcha exists that trips up most HTML authors, it’s the tricky link between the <IMG> and <MAP> tags. You must assign a name to the <MAP>; in the <IMG> tag, the USEMAP attribute requires a hash symbol (#) and the map name. If you forget the hash symbol, you can’t create a connection between the image and its map. The onClick event handler appears in Netscape’s area object beginning with Navigator 4. To be backward compatible with Navigator 3, use a javascript: URL for the HREF attribute if you want to navigate to another page with a click of the region. Example (with Listing 22-6) on the CD-ROM Properties alt Value: String Read/Write NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ The alt property represents the ALT attribute of an AREA. Future browsers may implement this attribute to provide additional information about the link associated with the AREA element. Related Item: title property. On the CD-ROM Tip Tip AREA.alt 523 Chapter 22 ✦ Image, Area, and Map Objects coords shape Value: String Read/Write NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ The coords and shape properties control the location, size, and shape of the image hot spot governed by the AREA element. Shape values that you can use for this property control the format of the coords property values, as follows: Shape Coordinates Example circ center-x, center-y, radius “30, 30, 20” circle center-x, center-y, radius “30, 30, 20” poly x1, y1, x2, y2, “0, 0, 0, 30, 15,30, 0, 0” polygon x1, y1, x2, y2, “0, 0, 0, 30, 15,30, 0, 0” rect left, top, right, bottom “10, 20, 60, 40” rectangle left, top, right, bottom “10, 20, 60, 40” The default shape for an AREA is a rectangle. Example on the CD-ROM Related Items: None. hash host hostname href pathname port protocol On the CD-ROM AREA.hash 524 Part III ✦ Document Objects Reference search target See corresponding properties of the link object (Chapter 21). shape See coords. MAP Element Object For HTML element properties, methods, and event handlers, see Chapter 15. Properties Methods Event Handlers areas onScroll name Syntax Accessing MAP element object properties: (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 The MAP element object is an invisible HTML container for all AREA elements, each of which defines a “hot” region for an image. Client-side image maps associate links (and targets) to rectangular, circular, or polygonal regions of the image. By far, the most important properties of a MAP element object are the areas array and, to a lesser extent, its name. It is unlikely that you will change the name of a MAP. (It is better to define multiple MAP elements with different names, and then assign the desired name to an IMG element object’s useMap property.) But you can use the areas array to change the makeup of the AREA objects inside a given client-side map. MAP 525 Chapter 22 ✦ Image, Area, and Map Objects Properties areas Value: Array of AREA element objects Read/Write NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Use the areas array to iterate through all AREA element objects within a MAP element. While NN6 adheres closely to the document node structure of the W3C DOM, IE4+ provides more direct access to the AREA element objects nested inside a MAP. If you want to rewrite the AREA elements inside a MAP, you can clear out the old ones by setting the length property of the areas array to zero. Then assign AREA element objects to slots in the array to build that array. Example (with Listing 22-7) on the CD-ROM Related Items: AREA element object. ✦✦✦ On the CD-ROM MAP.areas . is part of a form, which is part of a document, which is part of a window or frame). Expanded object models of IE4+ and NN6+ include script- able access to form-related elements that are part. treat On the CD-ROM IMG.onAbort 520 Part III ✦ Document Objects Reference such problems by forcing a scripted page to reload or by navigating to an entirely different spot in your Web site. Example. scriptable properties. Moreover, you can change the makeup of client-side image map areas by AREA 522 Part III ✦ Document Objects Reference way of the MAP element object. The MAP element object contains