Display Random Image

Lesson 12 -- IMPORTANT: This version of your lesson is for saving or printing only. Please access links from within your Online Classroom.

INSTRUCTIONS:

To print this page, wait for the page to fully load. Once the document is ready to print, simply click your browser's File menu and choose Print.
To save this page, click your browser's File menu and choose Save As. Select a disk drive and folder to receive the file, and change the name of the file to less12.htm. To view the file while you are offline, just go to the drive and folder you selected when you saved the file and double-click the file named less12.htm. Your browser will start and you will have access to the file.

Chapter 1

Introduction

Well, this is it . . . the last lesson in this course. Because I'm a visual artist, this one gets my vote for being the most fun, as well. As I wrote way back in Lesson 1, JavaScript can be used to add interactivity to your web pages. We've seen some evidence of this in the lesson on events, and again in the lesson on forms and cookies. This lesson goes a little further and adds some interactivity to your web graphics. In this lesson, I'll show you how to create rollover effects and how to display random images on your web pages. I think that by the end of this lesson you'll agree that this one was the most fun, too.

Chapter 2

Displaying Random Images
One neat trick I haven't seen used much is displaying a new image to visitors each time they visit your web site. Displaying a random image chosen from a list of images is fairly easy to accomplish, as you'll see in a moment.
I recently agreed to design a web site for a popular photographer. He expects, among other things, to get many return visits to his site by potential clients. One thing he specified was the visitor should be able to see a different photograph each time he or she dropped by, virtually speaking. He also wanted the process to be such that it would be fairly easy for a member of his staff, with little knowledge of programming, to change the list of photographs that might be displayed.
Enter the following bit of JavaScript programming.
The following JavaScript program contains a list of images contained in an array. The program will randomly choose an image from the list and display it on the web page. Because of the way the program is constructed, it will be fairly easy for a staff member to add images to the list or change which images will be displayed.
Here's the code. To see how it works type it in and run it:

Display Random Image

This web page will display a random image chosen from a list contained within a JavaScript array. Every time the user visits the page she should see a different image.

Click the "Refresh" button on your web browser to see another image.

Running the preceding code should result in something similar to figure 12.1.

Figure 12.1
To be honest, there's really nothing new here. You've seen the random function that uses a Math.random object to generate random numbers, and you've written dozens of document.write() object lines yourself. This is really just a different use for technology that you've been experimenting with for weeks.
This is actually how programming works. The user presents a problem or a specification to the programmer (these may even be one and the same; for example, you are wanting to implement a technique on your own web site), and the programmer comes up with a solution.
At this stage in your learning, you should be able to easily follow along with the preceding program. It's fully commented and should work as advertised. Type it in and play around with it to see how it works. The only thing you'll need is a series of images. I simply created images of the ten digits (0-9) and called them 0.gif, 1.gif, 2.gif . . . 9.gif. Any series of web-ready (i.e. GIF or JPG) images will do. Just be sure to change the names of the images in the array to reflect the names of your image files.

Chapter 3

Creating Rollover Effects
One of the most sought-after effects that can be created with JavaScript is that of having an image, usually a button, change when the user moves the mouse over the image.
There are a couple of things involved in this process, and there are many ways of achieving the effect that's commonly referred to as "rollover." I'll show you the method I developed and which I believe is the easiest to understand and implement.
For an image to "rollover " or change, it must be linked to an event. This is perfect, though, as the image you'll want to rollover will undoubtedly be connected with an anchor (HTML link), and anchors have the MouseOver event and onMouseOver event handler linked to them.
Aside from having the images you'll be using ready, the only other thing you'll need is a function to swap them in and out. It's a fairly easy task to write such a function, as you'll see in the following program:

Function RollOver Test

This is a test page to see how JavaScript RollOvers work.

Running the preceding program will cause one button image to be swapped out for another when the user moves the mouse pointer over the button (see figure 12.2).

Figure 12.2
Although it's hard to get an idea of movement from a static image, you can see that the mouse pointer has changed to the hand and that the event has triggered the handler, which called the function and changed the image.
The function swapImages() uses a trick you may not have seen before. Rather than go through all kinds of programming contortions to see if the browser running the script is capable of doing so, the simple test "if (document.images)" does an elegant job of figuring out whether the function is supported or not. All it does is check whether the document object model exists and whether or not it recognizes the "Image" objects.
The function accepts two arguments, the name of the image (given to the image in the HTML tag) and the file name of the image that you want to use to replace the current image. The function uses the former to access the DOM entry for the image and it uses the latter to write the new filename into that entry, effectively replacing the image within the DOM.
The HTML tag uses the onMouseOver and onMouseOut event handlers to call the function. Pretty straightforward, right?
This routine is so elegant and easy to implement that, with a few minor changes, you can use it to create an even more sought-after effect, the secondary rollover.

Chapter 4

Secondary Rollovers
A secondary rollover occurs when you move the mouse over one image and a different image on the web page changes. You can do some pretty neat effects with this programming technique. In the next example, I use a blank image that will be replaced with an image that gives the user some more information about the link connected to the image that the mouse pointer is over (see Figure 12.3).

Figure 12.3
To see how this code works, type in and run the following program:

Secondary RollOver Test

This is a test page to see how secondary JavaScript RollOvers work.

The code in the preceding program is functionally the same as that in the previous example. The only change, aside from the addition of another image, is that the call to the function (with the onMouseOver and onMouseOut event handlers) refers to the secondary image.
Because we've named both images, we can refer to either of them when calling the swapImages() function. The function doesn't care which event calls it or which images it's required to swap. As long as it gets the image's name and it's filename, the replacement will take place.
As usual, I invite you to play around with the example programs and modify them to suit your own needs. Because the programs are fairly short and designed to demonstrate a specific point, they should also be relatively easy to change.

Chapter 5

Wrapping Up
That's it for this lesson and the JavaScript course! I hope that you have had as much fun taking the course as I did giving it, and that you'll use your new knowledge as a stepping stone to more advanced JavaScript programming.
There are a couple of good sites on the web (webmonkey.com comes to mind) and more good JavaScript books on store shelves and in your neighborhood library every day. You should easily be able to follow along with all but the most advanced programming examples now.
Have fun applying your newfound programming knowledge!

-Final Exam-

Please click here to complete the Final Exam.

We value your input. After you have completed the Final Exam, please click here to evaluate the course.

Have you completed all course work? If so, click here to obtain your completion letter!

Chapter 6

Glossary
Rollovers: The common name for images that change, or are replaced by another image, when the user moves the mouse over an image on the web page.
Secondary Rollovers: The common name for images that change when the user moves the mouse over another image on the web page.

IMPORTANT: This version of your lesson is for saving or printing only. Please access links from within your Online Classroom.