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.
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 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.src="myself.gif" would change the graphic displayed on the Web page from my dog, to myself.
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, document.images, document.images and document.images. 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>
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.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.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).