Properties of Objects

  1. Introduction
  2. A Practical Example: HTML
  3. JavaScript Code
  4. Example

Introduction

Objects simply are the things you can see on a Web page. If my home page has my pet dog's photo, that image is an object. In HTML, the image would be coded as: <IMG SRC="mydog.gif">. We usually would not think of this image as an programming object because on a static Web page there is no need to address it. If a dynamic Web page is the goal, however, we need to know how to address this object in order to change its properties.

Object names are usually taken care of by the browser. The first image on a page is always named: window.parent.document.images[0]. What this object name shows us is the object hierarchy where the image is placed last. Since an image is part of a document, its name is included. The general label of document can be used, or an actual name, if the document object has been assigned a name. Because a browser allows multiple windows to be open, and JavaScript can be used to address objects on any open window, it is a good practice to include the window label. Most common is the window.parent label, specifically looking at objects in the window where the code is executing from. Lastly, the index [0] assigns numbers to the images on the page in the order they appear, starting with 0 and increasing one integer for each additional image.

When coding HTML, all I need to do is specify the location of my dog's image file, the SRC. The SRC is not an object, but a property of the object window.parent.document.images[0] object. So what we see on my home page is an object whose graphic source location (SRC) property has been set to my pet's photo. This separation of objects and properties is what makes dynamic Web pages possible since objects placed on a page cannot be added or removed, but their properties can be dynamically changed. The line, window.parent.document.images[0].src="myself.gif" would change the graphic displayed on the Web page from my dog, to myself.

A Practical Example: HTML

For this example, I have created eight graphic files, four Chinese characters and four matching English words. When replicating this example, remember to change the graphic file names in the JavaScript code to match your file names (be careful to avoid letter case errors).

To begin, I make a simple page that includes the four Chinese graphic files, coded simply as:
<IMG SRC="file name goes here">.

The graphics located on the Web page are the SRC property of four objects: document.images[0], document.images[1], document.images[2] and document.images[3]. To make the images change, an event must be triggered. This can be done when a user moves the mouse cursor over one of the graphics (an onmoseover event). To code this in HTML, first enclose each graphic image with an anchor so that the cursor will change to a finger when over an image: <A HREF="HTML page name goes here">. The HREF should be set to the page you are creating so that if clicked, the link will simply reload the same page.

When the onmouseover event is triggered, a function can be run, which I have named: ChangeImage(). Similarly, when the mouse moves away from a graphic it triggers an onmouseout even that links to a function I have named ChangeImageBack(). The resulting HTML code for each graphic looks like this (names and index numbers must be changed to match each graphic):

<A HREF="index.html" ONMOUSEOVER="ChangeImage(0)" ONMOUSEOUT="ChangeImageBack(0)">IMG SRC="ci.gif" BORDER="0">< /A>

JavaScript Code

The JavaScript coding (see Listing 1) begins by loading the English images that will replace the Chinese images when the mouse moves over them. New objects are created to hold these images, which shows that objects can exist but do not need to be displayed on a page. For each image, an image object is created with the code: ObjectNameYouChoose = new Image(). Next, the new object's SRC property is set to the graphic it will represent: ObjectNameYouChoose.src = "GraphicFileName".

The next step is to create the functions that change the an object's graphic from the Chinese to English and back again as the mouse moves over and away from a graphic. This is done with an if statement that uses the object's index number to execute the correct line of code. If the user's mouse moves over the last Chinese word, which is actually two words together, then the ONMOUSEOVER event is triggered and executes the function ChangeImage(3), sending the index number 3 because the object number is 3. The object's graphic is changed by setting its SRC equal to the equivalent English object's SRC: window.parent.document.images[3].src = EngSchool.src and when the mouse moves away, the ONMOUSEOUT event is triggered and the object's SRC set back again: window.parent.document.images[3].src = "cshcool.gif" (because the Chinese graphic was loaded with the page, it will still exist in a buffer, so we do not need to have it placed in another object to preserve it).


Here is an example of changing the properties of objects in JavaScript code.

Move your mouse over the Chinese words.