Platinum Edition Using HTML 4, XML, and Java 1.2:The Web Browser Object Model

To access the contents, click the chapter and section titles.

Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

Table of Contents

Table 19.9 HTML image Object Properties and Events

Property	What It Contains

border	the value of the BORDER attribute
complete	indicates whether the image has been completely loaded
height	the value of the HEIGHT attribute
hspace	the value of the HSPACE attribute
lowsrc	the value of the LOWSRC attribute
name	the value of the NAME attribute
src	the value of the SRC attribute
vspace	the value of the VSPACE attribute
width	the value of the WIDTH attribute

Event	When It Occurs

onAbort	triggered when the user aborts the loading of an image, such as by clicking the Stop button
onError	triggered when an error occurs when an image is being loaded
onLoad	triggered when an image is completely loaded

image Object Example

Listing 19.3 shows an example that uses the onMouseOver and onMouseOut events of the link object, along with the properties of the image object, to create a hypertext link whose anchor changes whenever the mouse is passed over it. This is often done to highlight hypertext link anchors to make them stand out more as the mouse passes over them—for instance, the changed image can be a glowing version of the original image. Figure 19.5 demonstrates how this will appear in the Web page.

Listing 19.3 image.htm—Use JavaScript to Create Changing Hypertext Link Anchors

<HTML>
<HEAD>
<SCRIPT LANGUAGE=“JavaScript”>
<!-- Hide this script from incompatible Web browsers! -->
function changeImage(i,j) {
   document.images[i].src=“clickme” + j + “.gif”
}
//  Hide this script from incompatible Web browsers! -->
</SCRIPT>
<TITLE>The Image Object</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<H1>The Image Object</H1>
<HR>
<A HREF=“Document.htm” onMouseOver=“changeImage(0,2)”
                       onMouseOut=“changeImage(0,1)”>
   <IMG SRC=“clickme1.gif” WIDTH=200 HEIGHT=50>
</A>
<A HREF=“Location.htm” onMouseOver=“changeImage(1,2)”
                       onMouseOut=“changeImage(1,1)”>
   <IMG SRC=“clickme1.gif” WIDTH=200 HEIGHT=50>
</A>
<HR>
<A HREF=“mailto:odonnj@rpi.edu”>Jim O’Donnell</A>
</BODY>
</HTML>

FIGURE 19.5 The properties, events, and methods of different objects can be combined, using JavaScript, to produce cool effects.

Using the Image Constructor

You might have noticed in the example shown in Listing 19.3 that the first time you passed your mouse over the image, a slight pause occurred before the new image displayed. This is because the image needed to be downloaded into your cache the first time. (If you viewed this example right from the accompanying CD-ROM, you might not have noticed this delay.)

Along with the image object, an Image constructor can be used to preload your cache with images that will subsequently be shown on your page. This is done by creating a new image object with the JavaScript new statement and then setting the src property of this object to the URL of your image. This creates what is, in essence, an undisplayed image that is part of the current Web page. Although the image is not displayed, it is loaded into your cache so that if it is displayed later it will load much more quickly.

With Listing 19.3, if the following code was included in the <SCRIPT> tag that is in the <HEAD> section, it would preload the two images used in the example.

function loadImages() {
   this[1]=new Image();
   this[1].src=“clickme1.gif”;
   this[2]=new Image();
   this[2].src=“clickme2.gif”;
}
if (document.images) {
   loadImages();
}

JavaScript Objects

This chapter concludes by discussing a few of JavaScript’s built-in objects. Strictly speaking, these objects are not part of the Web Browser Object Model; instead, they are part of JavaScript itself. However, their properties and methods are used in the same manner. JavaScript includes a number of its own objects—two of the most useful are the Date object and the Math object.

JavaScript objects, because they are outside the Web Browser Object Model hierarchy, are not the properties of any other object. In other words, to reference a JavaScript object, you need to use the object name itself instead of prefacing it with window or document, as shown in the next two sections below.

Using the Date Object

The JavaScript Date object is the easiest way to use dates and times within your scripts. JavaScript’s new statement is used to create an instance of the Date object. The following list shows some of the ways you can create the Date object:

• today = new Date()—Gives the current date

• birthday = new Date(“October 17, 1963 13:45:00”)

• birthday = new Date(1963,9,17)

• birthday = new Date(1963,9,17,13,45,0)

In the previous two examples, the general syntax is as follows:

newdate=new Date(year, month, day, hour, minute, second)

Note that the month is specified as an integer from 0 to 11, where 0 represents January and 11 represents December, and that the hour is in 24-hour format.

Table of Contents

Products | Contact Us | About Us | Privacy | Ad Info | Home

Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc.
All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Read EarthWeb's privacy statement.