Lab 14: JavaScript Rollovers

Overview

The files you will need are contained within the Lab14 folder within introShare on Crow. Download this folder, then open the page start.htm in your editor. Save this file as working.htm. Open working.htm in your browser.

At the moment this page contains an empty <SCRIPT></SCRIPT> container with some predefined code, and a table with two rows. In the top row of this table are five IMG tags. The JPEG files currently displayed have names like "imageX_off.jpg", where X is a number from 0 to 4. In the bottom row is a form containing a TEXTAREA element.

Open the page finished.htm in your browser. Roll the mouse over each of the five images. The image changes from grayscale to full color, and an appropriate passage of text appears in the textarea. Both image and text change when you roll out of the selected image. This is what you'll be building.

Step 1: Simple Rollovers

1.1 Return to working.htm in your text editor. Find the first IMG tag within the first table row. Place an anchor container around this tag. The HREF attribute should be set to "working.htm" (i.e., link the page back to itself, creating a dummy link). Immediately after the HREF attribute, insert this attribute or handler: onMouseOver="rollOn(0)". When you are finished, your anchor/image construction should look like this:

<a href="working.htm" onMouseOver="rollOn(0)">
<img src="images/image0_off.jpg" width="108" height="128" border="0"></a>

1.2 Within the <SCRIPT></SCRIPT> container in the HEAD of your file, create a function called rollOn(which). The function body looks like this:

  function rollOn(which)
    {

    }

Inside those curly braces, type the following JavaScript statement:

document.images[which].src = "images/image"+which+"_on.jpg";

Be sure to type the line exactly as you see it here. Be careful about the quotation marks. This line is complicated but also powerful; here's how it works. The handler we built in step 1.1 passes a value through a special variable called a parameter--the item within the parentheses following the function name rollOn. In the handler, this parameter is given a number value (0); in the script, it has a variable name (which). This usage places the value 0 into the variable which, and this variable is used by the rollOn(which) function.

Actually this variable is used twice. In the first instance, it tells the script which of the five IMG tags we're dealing with. We haven't gotten there yet, but eventually each tag (or to be precise, its associated link anchor) will pass a unique value. Secondly, that identifying value is plugged into an SRC reassignment for the IMG tag, allowing us to select one of five JPEGs that represent the button graphic in its on state.

The first part of this trick makes use of an array called images. An array is simply a numbered list, in this case a list of all the IMG tags defined on the current page. The browser automatically generates this list when the page loads and makes the list available as a property of the document object. Each IMG tag on the page gets an entry in the images array in the order of its appearance in the markup.

1.3 We're ready to test the work. Save the page, switch to your browser and reload working.htm. Move you mouse over the first image. It should assume its full-color, black-bordered on state. If this doesn't happen, check your work.

1.4 To make all five images sensitive to mouseOvers, add an anchor container and onMouseOver handler to each of the IMG tags on the page. You do not need to make any changes to the rollOn(which) script; it is designed to handle all the button graphics on the page. As you add the new handlers, change the parameter value by one each time, so that each handler passes a unique number between 0 and 4.

Note: we have to use numbers between 0 and 4 because all JavaScript arrays are numbered from zero. As we like to observe, all good programmers start with nothing.

1.5 Save, reload, and test. Now each image should assume its on state when you roll over it.

Step 2: Restore the OFF state

2.1 We want only one image in its on state at a time, which means we'll have to set each image back to its off state at some point. A convenient way to do this is to detect a mouseOut event, which is generated when the mouse leaves the image rectangle. Add the following handler to the initial anchor tag of your first image:

onMouseOut="rollOff(0)"

2.2 Scroll up to the HEAD portion of your document and find the <SCRIPT></SCRIPT> container. Copy the current rollOn(which) function. Insert a couple of line returns after the end of this function and paste in the copy. Change the name in the copy to rollOff(which) and in the single statement, change the word "on" to "off". Your new function should look like this:

  function rollOff(which)
    {
      document.images[which].src = "images/image"+which+"_off.jpg";
    }

2.3 Save, reload, and test. Your first image should return to its off state when you mouse out.

2.4 Add appropriate onMouseOut handlers to the remaining four image/anchor constructions. Be sure to increase the value of the parameter each time.

Step 3: Update the TEXTAREA

In the finished version of this page, each rollover both changes the appearance of the button graphic and causes text to appear in the textarea that sits below the button row. JavaScript has the ability to change two types of component without reloading the page: images, by replacing the SRC, and form elements, by replacing the VALUE. This second feature demonstrates the ability to change form elements.

document.forms[0].elements[0].value = projTexts[which]

This statement uses two more arrays automatically available to JavaScript as properties of the document object. The first of these arrays, forms, keeps track of all the forms defined on the present page; in our case there's only one. Meanwhile, each form has associated with it a subsidiary array, elements, that lists all its components, such as input fields, textareas, and submit buttons. Like the images array, each of these arrays is numbered from zero, listing available items according to the order of their appearance in the page markup. The statement document.forms[0].elements[0].value refers to the value of the first form component within the first form on our page, which is to say, that textarea.

To provide the alternative values for the textarea, we use a third array called projTexts. This array is not generated automatically, though it was pre-built in order to spare you some tedious typing. You can see it at the beginning of the <SCRIPT></SCRIPT> container in working.htm. Note the form of the statement that's used to create the array:

var projTexts = new Array (...);

This is the standard way of defining an array, which technically speaking is an instance of the JavaScript Array object. But you don't need to worry about these details, which have all been taken care of in advance.

3.2 Save, reload, and test. Now each mouseOver event should change the text within the TEXTAREA as well as the SRC of the relevant image. The sequence of texts in the projTexts array matches the sequence of images. Synchronization and consistency can be very important in scripting projects.

3.3 One last detail remains: in the finished version, the mouseOut event sets the value of the TEXTAREA back to its initial condition. As you can probably anticipate, we'll need to add a line to the rollOff(which) function in order to accomplish this. Here's the line:

document.forms[0].elements[0].value = projTexts[5];

Note that this line does not use the parameter value, which. If you're paying keen attention, you'll also notice that we've just referred to the sixth element (index number 5) of projTexts, an array that currently has only five elements (indices 0 through 4). We're in this momentarily awkward situation because we want to change the TEXTAREA back to a particular, constant value. The simplest way to do this is to add the initial text at the end of the projTexts array.

3.4 Immediately after the last set of quotation marks in the projTexts array (defined in the first line of the current container), add a comma and a space. Then add the following:

"Final Seminar Projects, 2000: Mouse over a project icon for its related text."

3.5 Save, reload, and test. Your page should now do everything the finished page does.