|
(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.
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.
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.
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.
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. That's all there is to it. Have fun trying and using this technique on your own.
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: You can refer to the Image object using JavaScript with the following
syntax: You can load a different image into your document, even after the page
has finished loading, using the src property of the Image object:
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.
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. 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. 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.
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:
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. 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. 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.
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. 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.
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.
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:
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.
|