[Contents] [Prev page] [Next page] [Last page]

Changing the Stacking Order of Fish and Pole Layers

This example is an advanced version of Positioning and Moving Fish and Pole Layers.

In this extended version, when the fish reaches the far right, it turns around and swims back again. On the way back, it swims in front of the green pole, behind the red (middle) pole, and in front of the blue pole. To enable the fish to swim in front of a pole on the way out and swim behind it on the way back, we need to change the stacking order of the layers each time the fish changes direction.

Both fishes (one for each direction) are animated GIFs, and the three poles are static GIFs.

To run the example, select:

 fish2.htm

To view the complete code for the example, select:

 fish2htm.htm

Add Another Layer to Contain the Reverse Fish Image

When the fish reaches the right edge, the image of the fish needs to be changed to a fish swimming in the reverse direction. The change needs to occur very quickly, perhaps too quickly for there to be time for the new fish image to be downloaded across the network. If the image of the reverse fish is not downloaded quickly enough, the image will continue coming in as the fish moves back across the screen, and to start with, you'll see only bits of the fish. This effect gets worse the greater the distance that the fish image needs to travel from the server to the browser across the internet.

To ensure that the fish is completely whole as soon as it starts swimming back, we can preload the fish image. In this case, the easiest way to do it is to create a new, hidden layer that contains the reverse fish image. Even if a a layer is hidden, all its images are downloaded when the layer is loaded.

The following text creates a hidden layer containing an image of the fish swimming in the reverse direction.

<LAYER NAME="fishB" VISIBILITY="hide">
  <IMG SRC=images/fish/fish2.gif>
</LAYER>

Initializing the Fish to have a Direction Variable

The following function initializes the fish layer so that it has a direction variable, to track of which direction the fish is swimming. To start with, the fish swims forward. The fish also has forwardimg and backwardimg properties that hold the appropriate fish images.

function initializeFish() {
  // create the backward fish image to force it to preload now
  var fish = document.layers["fish"];
  var fishB = document.layers["fishB"];
  fish.direction = "forward";
  fish.forwardimg = fish.document.images["fish"].src;
  fish.backwardimg = fishB.document.images["fishB"].src;
  }

Moving the Fish Backwards and Forwards

The following code defines a function movefish2() which moves the fish to the right, changes the image of the fish (so it is facing the left), moves the fish back to the left, and repeats the process continuously.

In more detail, the function specifies that if the fish is moving forward and hasn't reached a horizontal position of 450, it keeps moving forward. If it has reached 450, it changes direction.

If it's moving backward and hasn't reached 10, it keeps moving backward. If it has reached 10, it changes direction.

Each time the fish changes direction, the function changes the stacking order of the layers, by calling either the changePoles() function or the resetPoles() function, depending on which way the fish is turning.

function movefish2() {
  var fish = document.layers["fish"];
  if (fish.direction == "forward") {
    if (fish.left < 450) {fish.moveBy(5, 0);}
    else {changePoles();changeDirection();}
  }
  else {
    if (fish.left > 10) {fish.moveBy(-5, 0);}
    else {resetPoles();changeDirection();}
  }
  setTimeout("movefish2()", 10);
  return;
}

Changing the Fish's Direction

The changeDirection() function changes the image of the fish, so that the fish is facing the correct direction, as shown in Figure 2. The function also sets the value of the direction variable to be the new direction.

Figure 2. Images of the fish facing in each direction
function changeDirection ()
{
  var fish = document.layers["fish"];
  if (fish.direction == "forward") {
    fish.direction = "backward";
    fish.document.images["fish"].src = fish.backwardimg;
  }
  else {fish.direction = "forward";
    fish.document.images["fish"].src = fish.forwardimg;
  }
  return;
}

Changing the Stacking Order of the Poles and the Fish

The function changePoles() and resetPoles() change the stacking order (z order) of the layers. You can change the stacking order of a layer in the following ways:

To keep your stacking order straight, it is a good idea to consistently use one of these ways, since if you mix them, it could be hard to keep track of the exact stacking order. For example, if you use moveAbove() to move the blue pole layer above the green pole layer, then you set the zIndex value of the fish layer to 3, you my not know where the fish is in the stacking order in relation to the green and blue poles.

The following functions changePoles() and resetPoles() consistently use the moveAbove() function to set the stacking order of the three layers contain the poles and the layer containing the fish.

function changePoles () {
	var redpole = document.layers["redpole"];
	var bluepole = document.layers["bluepole"];
	var greenpole = document.layers["greenpole"];
	var fish = document.layers["fish"];
	fish.moveAbove(redpole);
	bluepole.moveAbove(fish);
	greenpole.moveAbove(bluepole);
}

<!-- reset the stacking order of the poles and the fish -->
function resetPoles () {
	var redpole = document.layers["redpole"];
	var bluepole = document.layers["bluepole"];
	var greenpole = document.layers["greenpole"];
	var fish = document.layers["fish"];
	greenpole.moveAbove(bluepole);
	fish.moveAbove(greenpole);
	redpole.moveAbove(fish);
}

Updating the Button that Gets the Fish Going

This time, we will put the button that starts the fish moving in its own layer, as follows:

<H1>Fish Example 2</H1>
<LAYER LEFT=10 TOP=100 NAME="fishlink">
	<FORM>
	<INPUT type=button value="Move the Fish" 
	OnClick="initializeFish(); movefish2(); return false;">
	</FORM>
</LAYER>

This time, the OnClick() method initializes the fish before it calls movefish2(). We have to do this so that the direction variable on the fish gets initialized.



[Contents] [Prev page] [Next page] [Last page]

Copyright 1997, Netscape Communications. All rights reserved.