document Object, Slide Shows, and Rollovers
(Lesson 12)

I think you will find this lesson to be a lot of fun. We first talk briefly about the document object. This is the starting place for getting to most objects and properties in JavaScript. Therefore, I recommend that you understand exactly what it contains. There is a brief paragraph that describes how you use the open() and close() methods to write a complete page to the browser.

Then we finally get into the fun stuff! I will show you how easy it is to do Slide Shows, preload images, and do rollovers.


document Object

Listed below are the properties and methods of the document object. You should study these two tables and try to understand this important object.

Note that an indication as to whether the property is settable or not is provided. See the note at the end of the Properties table for an explanation. An indication as to which browsers the properties and methods work on is also given. If left blank, then that particular property or method should work on all browsers that support JavaScript.


Property Summary of document Object
 
alinkColor String, Specifies the ALINK attribute.  
anchors[] Array of anchor objects, contains an entry
for each anchor in the document.
 
applets[] Array of applet objects, Contains an entry
for each applet in the document.
N3+, IE4+
bgColor String, Specifies the BGCOLOR attribute  
cookie String, Specifies a cookie.  
domain String, Specifies the domain name of the
server that served a document.
N3+, IE4+
embeds[] Array, Contains an entry for each plug-in
in the document.
N3+, IE4+
fgColor String, Specifies the TEXT attribute.  
forms[] Array of Form objects, Contains an entry
for each form in the document
 
images[] Array of Image objects, contains an entry
for each image in the document.
N3+, IE4+
lastModified String, Specifies the date the document
was last modified.
 
layers Array of Layer objects, contains an entry
for each layer within the document.
N4+ only
linkColor String, Specifies the LINK attribute.  
links[] Array of Link objects, contains an entry
for each link in the document.
 
referrer String, Specifies the URL of the calling
document.
 
title String, Specifies the contents of the
TITLE tag.
 
URL String, Specifies the complete URL of a
document.
N3+, IE4+
vlinkColor String, Specifies the VLINK attribute.  

Bold properties are settable and readable. All others are readable but not settable. The property bgColor is settable for most browsers. The properties alinkColor, vlinkColor, fgColor, and linkColor are settable for the Internet Explorer Browser but not the Netscape browser.

 


Method Summary of document Object
 
captureEvents() Loads the previous URL in the history list. N4+ only
close() Closes an output stream and forces data
to display.
 
getSelection() Returns a string containing the text of the
current selection
N4+ only
handleEvent() Invokes the handler for the specified event. N4+ only
open() Opens a stream to collect the output of write
or writeln methods.
 
releaseEvents() Sets the window or document to release
captured events of the specified type,
sending the event to objects further along
the event hierarchy.
N4+ only
routeEvent() Passes a captured event along the normal
event hierarchy.
N4+ only
write() Writes one or more HTML expressions to a
document in the specified window.
 
writeln() Writes one or more HTML expressions to a
document in the specified window and follows
them with a newline character
 

I am not going to discuss each of these properties and methods in this lesson. Hopefully, you have enough experience now that you can research each one on your own in our Library.


The open() and close() methods

We have used the document.write() method a lot in this class. What if you want to dynamically write a new page to the browser after your document has completed loading? Using the open() and close() methods of the document object makes this possible.

The first thing you need to do is to put all of your coding for the new page in one string variable. This is necessary when you are writing to the same document that contains the script since the first document.write() will overwrite your coding. It is recommended even if you are writing to a new window, which we will learn how to do in the next lesson, because it is considerably faster.

So lets assume you want to create a new page using document write. Here's an example of how you would do it.

  var myPage = "all of the HTML coding for the page"
  document.open()
  document.write(myPage)
  document.close()  

That's all there is to it. Have fun trying and using this technique on your own.


Image Object

The Image object is a property of the document object. Netscape 3 and Microsoft Internet Explorer 4 were that first browsers that supported it.

The Image Object has 11 properties (border, complete, height, hspace, lowsrc, name, src, vspace, width, x, y). It does not have any methods. Only one of the properties is settable, the rest you can only read their value. The src property is settable and the most used. It is the one that I will discuss in this class.

You can create an Image object using the Image tag:

 <IMG SRC="ImageURL" NAME="ImageName">
As you are aware of, the Image tag has other important properties such as WIDTH and HEIGHT. For simplicity, I am only showing the properties that we will be using here.

You can refer to the Image object using JavaScript with the following syntax:

 document.ImageName

You can load a different image into your document, even after the page has finished loading, using the src property of the Image object:

 document.ImageName.src = "ImageURL"
That's how we work the magic of slide shows and rollovers.


Slide Shows

Slide shows are easy to do using JavaScript. Take a look at the one below. There are 4 pictures in this slide show. Clicking on Next displays the next picture until the 4th one is shown. Then nothing happens when you click on Next. The Previous link has the opposite effect and causes the previous picture to be displayed until you get the the first one and then nothing happens. Go ahead and try this simple slide show and then I will explain how it is done.

 
Previous    Next

First, all of your pictures need to be the same size. So if they are not, you need to use a graphics program to make them the same size.

Here is the code that I used for the two links.

 <IMG src="img/bird1.jpg" name="myPicture"
 width=140, height=190>
 <BR>
 <A href="JavaScript:previousPicture()">Previous</A>
 &nbsp;&nbsp;
 <A href="JavaScript:nextPicture()">Next</A>

All I am doing is calling a JavaScript function when one of the links is clicked. It is important to note that I did give the image object a name.

Listed below is the part that goes in the HEAD section. I put the URL's of the images that we want to rotate in an Array. I got the number of pictures from the length property of the Array. The advantage of doing it this way, instead of just using the constant 4, is that I can add or subtract images from the Array without having to make any other changes to the script.

 <SCRIPT Language="JavaScript">
 <!--
 var picture = new Array("img/bird1.jpg", 
   "img/mutt.jpg", "img/bird2.jpg", "img/boxer.jpg")
 var picNumber=1
 var numberofPics = picture.length

 function previousPicture(){
   if(picNumber > 1){
     picNumber--
     }
   document.myPicture.src=picture[picNumber-1]
   }
 function nextPicture(){
   if(picNumber < numberofPics){
     picNumber++
     }
   document.myPicture.src=picture[picNumber-1]
   }
 //-->
 </SCRIPT>

One of the two functions, previousPicture() or nextPicture(), is called when one of the links in the BODY section is clicked. In both functions, I first make sure that we are not at the the last picture by using the if statement and if not I then change the variable picNumber by 1. The src property of the image object is then set equal to the URL address of the picture that is contained in our Array. That's all there is to it.


Preloading Images


If you looked at the slide show in the previous section, I am sure that you noticed that it took a finite amount of time to load each image. You can then go back though the slides and the images will load instantaneously. This of course results from the fact the the images were cached in your computers memory the first time you looked at them.

You can put a script in your document that will preload and cache the images when the page is loading. That way the results will be instantaneous the first time someone looks at your slides.

The first thing your script needs to do is to create an Image object variable for each image you want to preload. Here is the syntax for that:

 var imageName = new Image(pixelWidth, pixelHeight)
This Image object is a little strange because it looks like a stand-alone object, which I don't think it is, and thus does not exactly fit the mold of objects as we understand it. In this case, you just have to accept the fact that this is what you do to preload images.

You then set the src property of the image object variable that you created to the URL of the image that you want to preload. Scripts for preloading images are normally put in the HEAD section of the document.

Here is the script that we could have used to preload the images for our slide show.

 <SCRIPT Language="JavaScript">
 <!--
 if(document.images){
   var image1 = new Image(140, 190)
   image1.src = "bird1.jpg"
   var image2 = new Image(140, 190)
   image2.src = "mutt.jpg"
   var image3 = new Image(140, 190)
   image3.src = "bird2.jpg"
   var image4 = new Image(140, 190)
   image4.src = "boxer.jpg"
   }
 //-->
 </SCRIPT>

If you remember, I earlier pointed out that the Image Object does not support browsers prior to Netscape 3 or Microsoft Internet Explorer 4. The if statement, if(document.images), checks to see if you browser supports the Image object and if it doesn't then preloading is not done.

So that's the basic way that you can preload images. The script that we used for the slide show itself does not have to be changed.

The disadvantage of preloading graphics using the above method is that the user may have to wait until all of the graphics are loaded before he sees anything on the screen. If you use a function, as shown below, to preload the images and call this function from the onLoad event of the BODY tag, then the page is loaded first and while the user is reading it, the rest of the images are preloaded.

 <SCRIPT Language="JavaScript">
 <!--
 var image1
 var image2
 var image3
 var image4
 function preloadImages(){
   if(document.images){
     image1 = new Image(140, 190)
     image1.src = "bird1.jpg"
     image2 = new Image(140, 190)
     image2.src = "mutt.jpg"
     image3 = new Image(140, 190)
     image3.src = "bird2.jpg"
     image4 = new Image(140, 190)
     image4.src = "boxer.jpg"
     }
   }
 //-->
 </SCRIPT>

Notice how I had to initialize the 4 image variables outside of the function. This is because the scope of the variable must be global for this to work. Actually, you can eliminate these 4 lines altogether and the variables will be declared inside the function when they are initialized. Since the var keyword is not used in this case the variables will be global. It's just that I am such a stickler for using the var keyword to identify variables. It's really up to you as to how you do it.

Now we need to call the function when our page has finished loading. This is done by putting onLoad="preloadImages()" in our BODY tag.

You only need to preload the images one time per session. Most people put a script on every page to preload the images that use them because it is not always certain which page the surfer will enter from.

Be prudent when using a script to preload images. I have found that things don't always work the way you expect. You need to test it on the server to make sure everything works. Make sure that your cache for your browser is cleared prior to this test. Sometimes you can do this by closing the browser and reopening it. I find that I have to manually clear my cache on my Netscape 4.5 browser. I do this by selecting the menu option Edit/Preferences, clicking on Advanced, then Cache. I then clear both caches.


Rollovers

Lets use one of the menu buttons that I have been using in this class to learn how to do Rollovers. We will use the Library button. It is shown below and works the same as it does in our menu.

To create a Rollover, you must first create two images that are exactly the same size. The ones I used for my Library button are shown here. I turned on the border for these images so you can distinguish between the image and the background.

All that really happens in a Rollover is the first image is normally shown. The second image is shown when you place the mouse over the image. Here is the code that I used in the BODY section for this rollover.

 <A HREF="JavaScript:openPopLibrary()" 
 onMouseOver=
   "document.imgLib.src='img/library_on.gif'" 
 onMouseOut=
   "document.imgLib.src='img/library_off.gif'">
 <IMG src="img/library_off.gif" border=0 name="imgLib">
 </A>
Let's look at the Image, IMG, tag first. It looks like any other Image tag except that we have given it a name so that we can refer to it (The one in our menu on the left is called imgLibrary, so I had to name this one imgLib to distinguish between the two).

Now, look at the Anchor tag. The onMouseOver event loads the second image and the onMouseOut event loads the original image. That's how a rollover works.

I put the following code in the HEAD section to preload the images.

 <SCRIPT Language="JavaScript">
<!--
// Load images for menu
var libraryOff 
var libraryOn
if(document.images){
  libraryOff = new Image(72,22)
  libraryOn = new Image(72,22)
  libraryOff.src = "img/library_off.gif"
  libraryOn.src = "img/library_on.gif"
  }
//-->
</SCRIPT>

Shown below is the way that most people do the part that goes in the BODY section. What's the difference? It is true that results are the same. The difference is that the object variable already contains the URL for the image. So this variable is used instead of the actual URL. You can use this method or the first one for your rollovers.

 <A HREF="JavaScript:openPopLibrary()" 
 onMouseOver="document.imgLib.src=libraryOn.src" 
 onMouseOut="document.imgLib.src=libraryOff.src">
 <IMG src="img/library_off.gif" border=0 name="imgLib">
 </A>


Image Array

There is more that one way to skin a cat and there is more than one way to refer to an image object. The image object is actually an Array of objects in the document object. Therefore, you can refer to an Image object using either one of the following syntax's:

 document.ImageName
 document.images[n]
The n is the number of the image in the document which is 0 for the first one. There may be times that you will find that it is to your advantage to use the array syntax. Here is an example of an effect I crated using two images.

I am not going to take the time to explain this script. If you would like to see the script for yourself then visit my other site, JavaScript Corral. Look under Code 4 U, the scrollers section (Do you believe that I waited until the 12th lesson to plug my other site? hehe).

Note that other array objects, such as forms and links, can also be addressed the same way as we did the Image object.



Assignment

  1. Show how something similar to the problem 2 in lesson 11 can be accomplished without using frames. Have the user entered information on the first page repeated on a second page when a button is pressed. You will use the open(), close() and write(), methods to do this.
    Solution   Source

  2. Modify the Slide Show that we did in this lesson so that only one link is used to change the images. Once the last image is reached, the first image should again be displayed when the link is clicked so that the images are continuously rotated with each click.
    Solution   Source

  3. Modify the slide show we did in problem 3 so that the names of the pictures are also displayed under the picture. Use a text box in a form for this.
    Solution   Source

  4. Do your own rollover.
    Solution   Source



[ Top of Page  |  Contents ]