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

Positioning, Moving, and Restacking Layers
(A Fish and Three Poles)

This example is presented in two parts. The second part is an advanced version of the first part.


Figure 1. The fish and three poles in their initial positions

Positioning and Moving Fish and Pole Layers

In this example, a fish and 3 poles appear in the window along with a link saying "Move the Fish." When you click the link, the fish moves from the left side of the window to the right, swimming in front of the two outer poles and swimming behind the middle one.When it reaches the far right, it jumps back to the far left and starts swimming across the screen again.

The fish is an animated GIF, and the three poles are static GIFS.

To run the example, select:

 fish1.htm

To view the code for the example, select:

 fish1htm.htm

Positioning the Fish and Pole Layers

Here's the code that creates one fish layer and three pole layers:

	<HTML>
	<HEAD>
	<TITLE>Swimming Fish</TITLE>
	</HEAD>
	<BODY>

	<LAYER NAME="bluepole"LEFT=160 TOP=150>
	<IMG SRC=images/bluepole.gif>
	</LAYER>

	<LAYER NAME="greenpole" LEFT=360 TOP=150>
	<IMG SRC=images/greenpol.gif>
	</LAYER>

	<LAYER NAME="redpole" LEFT=260 TOP=150>
	<IMG SRC=images/redpole.gif>
	</LAYER>

	<LAYER NAME="fish" LEFT=40 TOP=170 above="redpole">
	<IMG ALIGN=RIGHT SRC=images/fish/fish1.gif >
	</LAYER>

By default, each subsequent layer is placed on top of the one before it in the file (not the one before it according to LEFT or TOP value.) So to start with, the blue pole is on the "bottom," the green pole is above the blue pole, and the fish is directly below the red pole (that is between the green pole and the red pole.) The red pole is on top of everything.

Moving the Fish

The following code is a JavaScript script that defines a function moveFish() which causes the fish to repeatedly move across the window.

	<SCRIPT>
	<!-- Simple move function -->
	function movefish() {
		var fish = document.layers["fish"];
		if (fish.left < 400) {
			fish.moveBy(5, 0);}
		else {
      fish.left = 10;}
	// use the windows method setTimeOut
		setTimeout(movefish, 10);
   		}
	</SCRIPT>

This function binds the variable fish to the layer named "fish." The function checks if the horizontal location of the fish layer is less than 400, in which case it uses the moveBy() method to move the layer 10 pixels to the right. If the horizontal location is greater than 400, the function sets the horizontal location back to 10.

Then the function waits 10 milliseconds and calls movefish() (that is, itself) again.

The net result is that when this function is invoked, the fish swims across the screen to the 400th pixel, then reappears at the left of the screen and swims across the screen again, ad infinitum.

Due to the stacking order of the poles, the fish will seem to swim in front of the blue pole, behind the red (middle) pole, and in front of the green pole.

To start the fish swimming, create a button that invokes the function moveFish() when a person clicks on the link.

The HTML text to do this is:

<FORM>
	<INPUT type=button value="Move the fish" OnClick="movefish(); 
	return false;">
</FORM>

Since this HTML text is not in a layer, it is displayed in the position that it would appear in if there were no layers in the page. In this case, this text is the only text in the page, so it appears at the top of the page. If you want to specify exactly where the button appears, you would put in a layer and set the position of the layer (which we do in the second part of this example.)

Once your ending </BODY></HTML> tags have been added to the file, it is finished and ready for testing.

Note that once you click on the "Move the Fish" button, the fish starts moving and doesn't stop. If you want to make it stop, reload the file. (In a later release, it is likely that you will be able to use the STOP button in the browser to stop the fish moving.)



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

Copyright 1997, Netscape Communications. All rights reserved.