Lesson 9 -- Printer Friendly Version

INSTRUCTIONS:

To print this lesson exactly as it appears on your screen, wait a minute or two for the entire page to load. The download should not be considered complete until you see the copyright notice at the bottom of the page. Once the document is ready to print, simply click your browser's File menu and choose Print.
To save a text-only version of this lesson, 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 less9.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 less9.htm. Your browser will start and you will have access to the file.
If you use the Microsoft Internet Explorer browser and the Microsoft Outlook mail program, you can e-mail a text-only version of this file to yourself. To do so, click the File menu, choose Send, and then select Page by e-mail.

IMPORTANT: This version of your lesson is for saving or printing only. All links and images have been disabled to decrease download time and help you avoid printer difficulties.

Chapter 1

Today, you're going to learn how to create a web page that interacts with its visitors. To see how the page works, go to the 'Supplementary Materials' page and click on 'Demonstration'.
Note: this only works if you're using Netscape 3.0 (or greater) or Internet Explorer 4.0 (or greater).
Move your mouse over each of the three images on this page. Notice how each image changes as your mouse rolls over the image.

-How it works-

First I culled three images from an inexpensive clip art package. I opened each image in my paint program (I used the shareware program Paint Shop Pro--from www.jasc.com-- but any paint program will work) and converted each image to gray scale. I now had two versions of each image: one color version and one gray scale version. Both versions are identical in width and height.

I saved the images, naming the gray scale versions fructose1.gif, glucose1.gif, and methane1.gif. I named the color versions as fructose2.gif, glucose2.gif, and methane2.gif.

Next, I created a web page that displays the three gray scale images. Each of these images links to another page.

Finally, I used JavaScript functions to display the color version of each image only when your mouse passes over the image.

You can adapt these same functions to your needs. All you have to do is use a paint program to create one or more pairs of equal-sized images. Then, simply change the filenames so they match the names of the files you created.

-The Script-

We're going to set up a couple of functions, so we'll have to begin by placing the script described below inside the <HEAD> of an HTML document.

1. Start a new HTML document. In the <HEAD> of that document, we'll want to start the script as described in lesson 9.
 <script language = "JavaScript">
 <!--
2. Now, we need to perform a test. The rollover trick we're using here will only work with the Netscape Navigator version 3.0 or greater and Microsoft Internet Explorer version 4.0 or greater. If we allow an older browser to run our JavaScript code, it will trigger a series of error messages.

Fortunately, JavaScript can detect the type of browser our visitor is using. JavaScript calls this information the 'navigator.userAgent' property. Below, you'll find a list of all browsers that are JavaScript-compatible, as well as their navigator.userAgent properties:

Browser navigator.userAgent
Netscape 2.0 Mozilla/2.0
Netscape 3.0 Mozilla/3.0
Netscape 4.0 Mozilla/4.0
Internet Explorer 3.0 Mozilla/2.0 (compatible); MSIE 3.0
Internet Explorer 4.0 Mozilla/4.0 (compatible); MSIE 4.0

At the present time, remember, our JavaScript code will only run on Netscape 3.0 (or greater) and Internet Explorer 4.0. Therefore, we'll ask our program to make sure the first nine characters of the navigator.userAgent is either 'Mozilla/3' or 'Mozilla/4.'

The two vertical bars you see at the end of the first line below stand for the word 'OR.' You can generate these vertical bars by shifting your backslash (\) key.

if ((navigator.userAgent.substring(0,9) == "Mozilla/3") ||
(navigator.userAgent.substring(0,9) == "Mozilla/4"))

3. Next, we need to pre-load all six of our images into memory on the visitor's computer. This will ensure that each color image is ready to be displayed the instant the mouse rolls over its gray scale partner.

I have six images to work with: fructose1.gif, fructose2.gif, glucose1.gif, glucose2.gif, methane1.gif, and methane2.gif.

If you are using your own images, you'll want to substitute your file names for mine.
 {
 fructose1=new Image();
 fructose1.src="fructose1.gif";
 fructose2=new Image();
 fructose2.src="fructose2.gif";
 glucose1=new Image();
 glucose1.src="glucose1.gif";
 glucose2=new Image();
 glucose2.src="glucose2.gif";
 methane1=new Image();
 methane1.src="methane1.gif";
 methane2=new Image(); 	 
 methane2.src="methane2.gif";
 }

Chapter 2

4. Now, let's write a function to switch to the second image when the mouse rolls over the first image (assuming the browser supports such things).
You don't have to change anything here even if you're using your own images.
function mouseOn(imgName) 
{  
  if ((navigator.userAgent.substring(0,9) == "Mozilla/3") ||  
  (navigator.userAgent.substring(0,9) == "Mozilla/4"))  
  {
    document[imgName].src=eval(imgName+"2.src");
  }
}
5. Now, let's write a function to switch back to the first image when the mouse rolls off.

You don't have to change anything here even if you're using your own images.
function mouseOff(imgName)
{
  if ((navigator.userAgent.substring(0,9) == "Mozilla/3") ||
 (navigator.userAgent.substring(0,9) == "Mozilla/4"))
 {
   document[imgName].src=eval(imgName+"1.src");
 }
}
6. Finally, we close our JavaScript as described in lesson
 // -->
 </SCRIPT>
7. In the body of our document, we need to display each of our gray scale images. We'll also want to tell the browser which function to run each time the mouse rolls on and off each image.

Here's the necessary HTML code for one such image. If you're working with your own images, you'll want to substitute the name of one of your images in the example below.

First, we create a link to another web page. Inside the link, we tell the onMouseOver and onMouseOut event handlers which functions to run.
 <A HREF = "fructose.html"  onMouseOver="mouseOn('fructose');
 return true;" onMouseOut="mouseOff('fructose');
 return true;">
Then, we display the image. If you're working with your own images, you'll want to substitute the correct file name and extension after 'SRC=.' You should also specify the correct height and width and supply your own alternative text.

Notice how we give the image a name. This name helps each of our functions keep track of which image it is trying to replace. <IMG NAME="fructose" SRC="fructose1.gif" BORDER = "0">

Finally, we close the link:
 </A>

Chapter 3

Then, we repeat with the next image/link, being careful to give each of our images a different name.
Below, you'll find the complete HTML/JavaScript document, ready to be copied, pasted, and modified. Notice how I placed the images in a table. You can do whatever you'd like with your collection of rollover images:

Don't forget that you can view this document and save its source code by visiting the lesson 10 page on the course website.

If you click on each of the three links on my sample page, you will be able to view all six images (fructose1.gif, fructose2.gif, glucose1.gif, glucose2.gif, methane1.gif, and methane2.gif).

If you'd like to use my images to practice your JavaScript skills, just point your mouse at each of the images, click the RIGHT mouse button (Mac users: hold down your button), and choose the 'Save' option to download the image.
 <HTML>  
 <HEAD>  
 <TITLE>JavaScript Demo</TITLE>  
 <SCRIPT LANGUAGE = "JavaScript">
 
 </SCRIPT>
 </HEAD>
 <BODY BGCOLOR = "#FFFFFF" TEXT = "#000000">
 <H2 ALIGN="CENTER">BIOCHEMISTRY AND YOU</H2>
 <CENTER>
 <TABLE WIDTH=600>
 <TR>
 <TD WIDTH=200 ALIGN="LEFT">
 <BR><BR>
 <A HREF = "fructose.html"
 onMouseOver="mouseOn('fructose');  return true;"
 onMouseOut="mouseOff('fructose');  return true;">
 <IMG NAME="fructose"  SRC = "fructose1.gif"
 BORDER = "0"></A>
 </TD>
 <TD WIDTH=200 ALIGN="CENTER" VALIGN="TOP">
 <A HREF = "methane.html"
 onMouseOver="mouseOn('methane');  return true;"
 onMouseOut="mouseOff('methane');  return true;">
 <IMG NAME="methane"  SRC = "methane1.gif"
 BORDER = "0"></A> </TD>
 <TD WIDTH=200 ALIGN="RIGHT">
 <BR><BR>
 <A HREF = "glucose.html"
 onMouseOver="mouseOn('glucose');  return true;"
 onMouseOut="mouseOff('glucose');  return true;">
 <IMG NAME="glucose"  SRC = "glucose1.gif"
 BORDER = "0"></A>  
 </TD>  
 </TR>  
 </TABLE>  
 </CENTER> 
 <BLOCKQUOTE>
Life is, in part, a very complex sequence of chemical reactions. These reactions involve natural, as well as manufactured, chemicals. The study of these reactions makes up the field of biochemistry, the most complex and least understood of all branches of chemistry. A knowledge of biochemistry helps people understand many things: how the environment functions. How human beings are linked to their environment. How people can, if they are not careful, destroy the environment and thus ultimately destroy themselves.
 </BLOCKQUOTE>
 <P ALIGN="CENTER"><A HREF="index.html">Home</A></P>
 </BODY>
 </HTML>

Chapter 4

When you feel you have a grasp on all of the concepts taught within this lesson, I would like you to take a short, multiple choice quiz. To get to the quiz, click on 'Quizzes' on the menu bar. When the form comes up, input your last name, e-mail address, and password, and make sure you have 'Quiz 9' selected. Good luck!

IMPORTANT: This version of your lesson is for saving or printing only. All links and images have been disabled to decrease download time and help you avoid printer difficulties. Do NOT attempt to click any of the links on this page.