<!-- Fish Layer Example 2 originally by Netscape Communications, Inc. Modified by Danny Goodman (dannyg@dannyg.com) to use Cascading Style Sheets-Positioning and scripts compatible with Navigator 4 and Internet Explorer 4. --> <HTML> <HEAD> <TITLE>Swimming Fish</TITLE> <STYLE TYPE="text/css"> <!-- #bluepole {position:absolute; top:150; left:160; z-index:1;} #redpole {position:absolute; top:150; left:260; z-index:4;} #greenpole {position:absolute; top:150; left:360; z-index:2;} #fish {position:absolute; top:170; left:40; z-index:3;} #waiting {position:absolute; top:100; left:50;} #fishlink {position:absolute; top:100; left:10; visibility:hidden;} --> </STYLE> </HEAD> <SCRIPT LANGUAGE="JavaScript"> // set browser platform global vars var isNav4, isIE4 var range = "" var styleObj = "" if (navigator.appVersion.charAt(0) == "4") { if (navigator.appName == "Netscape") { isNav4 = true } else { isIE4 = true range = ".all" styleObj = ".style" } } // pre-cache both fish images and assign to objects // for easy image swapping later var fishForward = new Image() fishForward.src = "images/fish1.gif" var fishBackward = new Image() fishBackward.src = "images/fish2.gif" // global switch for fish direction var direction = "forward" // global ID for fish motion timeout var timeoutID // show 'waiting' message while images load // then hide it and show the animation buttons layer/style function showForm() { // both browsers covered in each statement eval("document" + range + ".waiting" + styleObj + ".visibility = 'hidden'") eval("document" + range + ".fishlink" + styleObj + ".visibility = 'visible'") // commented out is the two-path method for comparison // if (isNav4) { // document.waiting.visibility = "hidden" // document.fishlink.visibility = "visible" // } // if(isIE4) { // document.all.waiting.style.visibility = "hidden" // document.all.fishlink.style.visibility = "visible" // } return false; } // start that fish a-swimmin' function moveFish3() { // cancel current ID so repeated invocations // don't trigger multiple timeouts clearTimeout(timeoutID) // set status bar message showFishLayer() // Nav4 returns integers for left; // IE4 returns "nnpx". Must use pixelLeft in IE4 if (isNav4) { var position = document.fish.left } if (isIE4) { var position = document.all.fish.style.pixelLeft } if (direction == "forward") { moveForward(position) } else { moveBackward(position) } // call this function again after 10 ms to nudge fish timeoutID = setTimeout("moveFish3()", 10); return; } // nudge fish to the right 5 pixels until // it reaches right edge; then turn him around function moveForward(position) { if (position < 450) { if (isNav4) { document.fish.left += 5 } if (isIE4) { document.all.fish.style.pixelLeft += 5 } } else { setPoles("new"); changeDirection(); } } // nudge fish to the left 5 pixels until // it reaches left edge; then turn him around function moveBackward(position) { if (position > 10) { if (isNav4) { document.fish.left -= 5 } if (isIE4) { document.all.fish.style.pixelLeft -= 5 } } else { setPoles("reset"); changeDirection(); } } // swap image in the mainFish layer/object and // change global direction value function changeDirection () { // different references for image in layer/style if (isNav4) { var fishImg = document.fish.document.images["mainFish"] } if (isIE4) { var fishImg = document.all.mainFish } if (direction == "forward") { direction = "backward"; fishImg.src = fishBackward.src; } else { direction = "forward"; fishImg.src = fishForward.src; } return; } // cross-platform API for setting zIndex property function setZIndex(objectName, zOrder) { var theObj if (isNav4) { theObj = eval("document." + objectName) } if (isIE4) { theObj = eval("document.all." + objectName + ".style") } if (theObj) { theObj.zIndex = zOrder } } // change the stacking order of the poles and the fish function setPoles (type) { // call my cross-platform API for zIndex setZIndex("bluepole", ((type == "reset" ) ? 1 : 3)) setZIndex("redpole", ((type == "reset" ) ? 4 : 1)) setZIndex("greenpole", ((type == "reset" ) ? 2 : 4)) setZIndex("fish", ((type == "reset" ) ? 3 : 2)) return; } // give him a rest function stopFish3() { clearTimeout(timeoutID) window.status = "" } // fish in front or behind red pole? function showFishLayer() { window.status = (direction == "forward") ? "Fish BEHIND red pole and IN FRONT OF others." : "Fish IN FRONT OF red pole and BEHIND others." } </SCRIPT> <BODY BGCOLOR="#ffffff" onload="showForm();"> <H1>Fish Example 3</H1> (For cross-platform CSS-P deployment) <SPAN ID=waiting> <H2>Please wait while the fish loads...</H2> </SPAN> <SPAN ID=fishlink> <FORM> <INPUT type=button value="Move the Fish" onClick="moveFish3(); return false;"> <INPUT type=button value="Stop the Fish" onClick="stopFish3(); return false;"> </FORM> </SPAN> <SPAN ID=bluepole> <IMG SRC=images/bluepole.gif> </SPAN> <SPAN ID=redpole> <IMG SRC=images/redpole.gif> </SPAN> <SPAN ID=greenpole> <IMG SRC=images/greenpol.gif> </SPAN> <SPAN ID=fish> <IMG NAME="mainFish" SRC=images/fish1.gif > </SPAN> </BODY> </HTML>