Lab 15: DHTML Layer Effects

Note: This lab requires Microsoft Internet Explorer.

Step 1: Positioning

[1.1] Open the file start.htm, which you'll find within the Lab15 folder within introShare on Crow. Examine this file in both text editor and browser. You'll see that it contains five DIVs, each using a different named style. Named styles are identified in the style sheet with a hashmark (#). The five styles have already been defined. The corresponding DIVs are arranged in a long column, reflecting their order in the markup.

[1.2] Modify the relevant styles to transform the present page so it looks like this:

To specify the position of a block element, you must first set its position to "absolute." The properties top and left control the placement of a DIV. The z-Index property controls the order in which objects are stacked one above another. An object with z-Index 0 is on the bottom of the stack.

So to the style for the first DIV ("Eve"), add the following rules:

[1.3] To style the next DIV ("Metro"), increment the top and left values by some appropriate number (say, 15); set z-Index to 1. Continue in the same way for the other three DIVs increasing z-Index by 1, top and left by 15 each time.

[1.4] Save your work, switch to your browser, and reload the page. You should see a stack of DIVs neatly staggered as in the illustration.

Step 2: Click Effects

In the finished version of this lab, the user can click on any of the stacked DIVs and cause that DIV to appear on top of the stack. We'll write some JavaScript functions to make this work. We begin by trying to make the lowermost DIV ("Eve") come to the top.

[2.1] To cause a DIV to respond to a mouse click, there must be an onClick handler (attribute) in its initial tag. Add this handler:

Where the parameter indicated here as x will be 0 in the first DIV, 1 in the second, and so forth, up to 4 in the final DIV.

[2.2] Write the function bringForth(which) into the currently empty <SCRIPT></SCRIPT> container in the HEAD portion of the page. To write this function, you'll need to know how to refer to styled DIVs. The general form is:

In the schematic example above, terms that appear in bold are placeholders that must be replaced by actual values. The value N will be replaced by a number in much the same way that we refer to form elements or images. The first DIV on a page is tags("div").item(0), the second is tags("div").item(1), and so forth.

The values property and value are replaced by the property you wish to change (for instance, zIndex) and the numerical value to which you want to change it (for instance, 5).

Now for something a bit regrettable. The property we refer to as z-Index in stylesheets is called zIndex in JavaScript--the hyphen drops out, but note that the capital "I" remains. You must observe this variation carefully.

If you stacked your DIVs correctly, you assigned them a series of z-Index values running from 0 to 4. To make any DIV fly to the top of the present stack, we can assign it a zIndex of 5. Enter the following line into the function bringForth(which):

[2.3] Save your work, switch to your browser, and reload. Click on the "Eve" DIV. It should pop forward. Each of your other four DIVs should do the same, in turn; though you won't see exactly what you see in the demonstration version. The DIVs will each pop forward once, but they won't go back to their previous positions when you click on one of their neighbors.

[2.4] To solve this problem, we need to add a new function to the scripts for this page. Here it is:

function setBack()
  {
    for(x=0; x<5; x++)
      {
        document.all.tags("div").item(x).style.zIndex = x;
      }
  }

This function uses a JavaScript construction called a for loop, which repeats a given set of instructions using a specified range of values in one particular variable. In this case, the loop begins at zero and runs up to 4. These are, of course, the index numbers for our DIVs in the document.all.tags("div").item() array. Since we want each DIV stacked on a unique layer, we can also use its ordinal number as its z-Index assignment.

You need to invoke the function setBack() at some point within the bringForth(which) function. Can you figure out where? If you get it right, you should be able to click on any of the DIVs and pop it to the front, leaving the rest of the stack in proper alignment.