Moving Fish Example 2



<HTML>
<HEAD>
<TITLE>Swimming Fish</TITLE>
</HEAD>
<BODY BGCOLOR="#ffffff">

	<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 NAME="fish" SRC=images/fish1.gif >

	</LAYER>

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


	<SCRIPT>

	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;
    return;
	}

	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;
	}

	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;
	}

	<!-- change the stacking order of the poles and 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);
	return;
	}


	<!-- 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);

		return;
	}



	</SCRIPT>

	<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>


</BODY>
</HTML>