Week 6, Lab 2: JavaScript Rollovers

Requires Internet Explorer.

Open start6.2.htm in both your text editor and Web browser. This file is in the lab 6.2 folder on your computer.

At the moment this page contains an empty <SCRIPT></SCRIPT> container and a table layout with two cells. The lefthand cell contains five <IMG> tags displaying grayscale images. Each tag is named "image1," "image2," and so forth. The JPEG files currently displayed have names of the form "[fileName]Off.jpg."

Now go to your browser and open the page finished6.2.htm. When you load the page, one of the grayscale images, chosen at random, will be highlighed. Text will appear in the white space to the right of the screen, within the righthand table cell. Roll your cursor over one of the non-highlighted images; different text should appear on the right and the image should turn to full color. Use the Back function in your browser to return to start6.2.htm.

Transform the start page into the finished page. Here are the steps to follow:

Part I: Simple Rollovers

1.1 Return to start6.2.htm in your text editor. Add an onMouseOver handler to the first <IMG> tag in the first table cell (the one that displays the logo for "Aversion Aesthetics"). Set the value of this attribute equal to "rollOn(1)."

1.2 Within the <SCRIPT></SCRIPT>; container in the HEAD of your file, create a function called rollOn(whichImage). Set up an if condition within the function body, like so:

if(whichImage == 1)

{

}

Note the double equals sign (==), which is required when checking an existing value. Within the curly braces of the if condition you need to insert two statements: the first will reassign the SRC of the image block called "image1"; the second will reassign the SRC of the image block called "textBlock," which occupies the righthand table cell. The statement that reassigns image source looks like this:

document.images['imageName'].src=[pathway/filename.jpg];

"Imagename" in the first case will be "image1." Keep the single quote marks--they are required. The file you want is called "aversionAestheticsOn.jpg" and it is located in the images folder within the folder that contains the present file. The second reassignment will be for "textBlock" and its source will be a file called "aversionAestheticsText.jpg," also in the images folder.

Save your work, switch to your browser, and test. When you roll over the Aversion Aesthetics logo, it should turn to vivid black-and-white and text describing the project should appear on the right.

1.3 Within the body of the rollOn(whichImage) function create four more if conditions, one for each of the four other possibilities. Here are the images and source files you'll need:

Note that you don't need to worry about image dimensions. In the case of the project graphics, both "on" and "off" versions have been pre-built to the same dimensions; for the text graphics, the "off" file is a single-pixel dot that automatically scales to fit.

Part II: Restricting Selection to a Single Option

2.1 When you test your page now, you'll see that the text changes as you roll over various options, but once a project image has been highlighted once, it stays that way. This is not quite desirable. In the text editor, insert an onMouseOut handler in each of the IMG tags that mark the five projects. The value of each handler should be "rollOff(x)", where x is a number from 1 to 5.

2.2 Go to your <SCRIPT></SCRIPT> container. Select over the entirety of the rollOn(whichImage) function and copy it. Insert a few blank lines and paste in what you have copied--i.e., create a duplicate of the original function. Change the name of this duplicate to rollOff(whichImage). You don't need to change the if conditions or the names of the image blocks, but wherever you see the word "On" in a file name, change it to "Off." Likewise, in each of the five conditions change the SRC assigned to textBlock to "dot.jpg". Like all the other files, "dot.jpg" is in the images subfolder.

Save and check your work. Now when you move the cursor out of a project graphic, its highlighting should disappear along with its attendant text.

Part III: Randomizing the First Selection

3.1 The following statement generates a random number between 1 and 5 and assigns it to the variable randy:

randy = Math.ceil(Math.random()*5);

Note the unusual spelling of "ceil" (as in "ceiling"): I before E except after C.

See if you can figure out how to apply this statement to generate a random selection when the page loads.

3.2 To cause a JavaScript function to execute when the page loads, place an onLoad handler in the initial BODY tag.

3.3 Once you've got your random number, you'll need to plug it into a series of if tests as in the rollOn(whichImage)function. You could simply copy the tests and their consequences out of that function. Or is there an easier way?

Note: The code described here will only work in Internet Explorer: Netscape Navigator does not recognize handlers in the <IMG> tag. However, you can do rollovers in Navigator: simply surround the image tag with an <A></A> or anchor container and place the handlers within the initial tag of that container. Except for that difference, everything else described here is valid.