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