<DIV id=dot0 <br>style="VISIBILITY: hidden; WIDTH: 11px; POSITION: absolute; HEIGHT: 11px"><IMG <br>height=11 src="" width=11></DIV> <br><DIV id=dot1 style="WIDTH: 11px; POSITION: absolute; HEIGHT: 11px"><I11MG <br>height=30 src="http://www.gexus.com/latifeh/blog01/duckbee.gif" width=36></DIV> <br><DIV id=dot2 style="WIDTH: 11px; POSITION: absolute; HEIGHT: 11px"><IMG <br>height=18 src="http://www.gexus.com/latifeh/blog01/little_rose.gif" width=19></DIV> <br><DIV id=dot3 style="WIDTH: 11px; POSITION: absolute; HEIGHT: 11px"><IMG <br>height=18 src="http://www.gexus.com/latifeh/blog01/little_rose.gif" width=19></DIV> <br><DIV id=dot4 style="WIDTH: 11px; POSITION: absolute; HEIGHT: 11px"><IMG <br>height=18 src="http://www.gexus.com/latifeh/blog01/little_rose.gif" width=19></DIV> <br><DIV id=dot5 style="WIDTH: 11px; POSITION: absolute; HEIGHT: 11px"><IMG <br>height=18 src="http://www.gexus.com/latifeh/blog01/little_rose.gif" width=19></DIV> <br><DIV id=dot6 style="WIDTH: 11px; POSITION: absolute; HEIGHT: 11px"><IMG <br>height=18 src="http://www.gexus.com/latifeh/blog01/little_rose.gif" width=19></DIV> <br>< language=Java> <br><!-- hide code <br> <br>/* <br>Elastic Trail (By Philip Winston @ pwinston@yahoo.com, URL:http://members.xoom.com/ebullets) <br> featured on Dynamicdrive.com <br>For this and 100"s more DHTML s, visit http://dynamicdrive.com <br>*/ <br> <br> <br>// Thanks to Troels Jakobsen <tjak@get2net.dk> <br>// for fix which makes it work when the page is scrolled <br> <br>var nDots = 7; <br>if (document.all&&window.print) <br>document.body.style.cssText="overflow-x:hidden;overflow-y:scroll" <br>var Xpos = 0; <br>var Ypos = 0; <br> <br> // fixed time step, no relation to real time <br>var DELTAT = .01; <br> // size of one spring in pixels <br>var SEGLEN = 10; <br> // spring constant, stiffness of springs <br>var SPRINGK = 10; <br> // all the physics is bogus, just picked stuff to <br> // make it look okay <br>var MASS = 1; <br>var GRAVITY = 50; <br>var RESISTANCE = 10; <br> // stopping criterea to prevent endless jittering <br> // doesn"t work when sitting on bottom since floor <br> // doesn"t push back so acceleration always as big <br> // as gravity <br>var STOPVEL = 0.1; <br>var STOPACC = 0.1; <br>var DOTSIZE = 11; <br> // BOUNCE is percent of velocity retained when <br> // bouncing off a wall <br>var BOUNCE = 0.75; <br> <br>var isNetscape = navigator.appName=="Netscape"; <br> <br> // always on for now, could be played with to <br> // let dots fall to botton, get thrown, etc. <br>var followmouse = true; <br> <br>var dots = new Array(); <br>init(); <br> <br>function init() <br>{ <br> var i = 0; <br> for (i = 0; i < nDots; i++) { <br> dots[i] = new dot(i); <br> } <br> <br> if (!isNetscape) { <br> // I only know how to read the locations of the <br> // <LI> items in IE <br> //skip this for now <br> // setInitPositions(dots) <br> } <br> <br> // set their positions <br> for (i = 0; i < nDots; i++) { <br> dots[i].obj.left = dots[i].X; <br> dots[i].obj.top = dots[i].Y; <br> } <br> <br> <br> if (isNetscape) { <br> // start right away since they are positioned <br> // at 0, 0 <br> startanimate(); <br> } else { <br> // let dots sit there for a few seconds <br> // since they"re hiding on the real bullets <br> setTimeout("startanimate()", 2000); <br> } <br>} <br> <br> <br> <br>function dot(i) <br>{ <br> this.X = Xpos; <br> this.Y = Ypos; <br> this.dx = 0; <br> this.dy = 0; <br> if (isNetscape) { <br> this.obj = ("document.dot" + i); <br> } else { <br> this.obj = ("dot" + i + ".style"); <br> } <br>} <br> <br> <br>function startanimate() { <br> setInterval("animate()", 20); <br>} <br> <br> <br>// This is to line up the bullets with actual LI tags on the page <br>// Had to add -DOTSIZE to X and 2*DOTSIZE to Y for IE 5, not sure why <br>// Still doesn"t work great <br>function setInitPositions(dots) <br>{ <br> // initialize dot positions to be on top <br> // of the bullets in the <ul> <br> var startloc = document.all.tags("LI"); <br> var i = 0; <br> for (i = 0; i < startloc.length && i < (nDots - 1); i++) { <br> dots[i+1].X = startloc[i].offsetLeft <br> startloc[i].offsetParent.offsetLeft - DOTSIZE; <br> dots[i+1].Y = startloc[i].offsetTop + <br> startloc[i].offsetParent.offsetTop + 2*DOTSIZE; <br> } <br> // put 0th dot above 1st (it is hidden) <br> dots[0].X = dots[1].X; <br> dots[0].Y = dots[1].Y - SEGLEN; <br>} <br> <br>// just save mouse position for animate() to use <br>function MoveHandler(e) <br>{ <br> Xpos = e.pageX; <br> Ypos = e.pageY; <br> return true; <br>} <br> <br>// just save mouse position for animate() to use <br>function MoveHandlerIE() { <br> Xpos = window.event.x + document.body.scrollLeft; <br> Ypos = window.event.y + document.body.scrollTop; <br>} <br> <br>if (isNetscape) { <br> document.captureEvents(Event.MOUSEMOVE); <br> document.onMouseMove = MoveHandler; <br>} else { <br> document.onmousemove = MoveHandlerIE; <br>} <br> <br> <br>function vec(X, Y) <br>{ <br> this.X = X; <br> this.Y = Y; <br>} <br> <br>// adds force in X and Y to spring for dot[i] on dot[j] <br>function springForce(i, j, spring) <br>{ <br> var dx = (dots[i].X - dots[j].X); <br> var dy = (dots[i].Y - dots[j].Y); <br> var len = Math.sqrt(dx*dx + dy*dy); <br> if (len > SEGLEN) { <br> var springF = SPRINGK * (len - SEGLEN); <br> spring.X += (dx / len) * springF; <br> spring.Y += (dy / len) * springF; <br> } <br>} <br> <br> <br>function animate() { <br> // dots[0] follows the mouse, <br> // though no dot is drawn there <br> var start = 0; <br> if (followmouse) { <br> dots[0].X = Xpos; <br> dots[0].Y = Ypos; <br> start = 1; <br> } <br> <br> for (i = start ; i < nDots; i++ ) { <br> <br> var spring = new vec(0, 0); <br> if (i > 0) { <br> springForce(i-1, i, spring); <br> } <br> if (i < (nDots - 1)) { <br> springForce(i+1, i, spring); <br> } <br> <br> // air resisitance/friction <br> var resist = new vec(-dots[i].dx * RESISTANCE, <br> -dots[i].dy * RESISTANCE); <br> <br> // compute new accel, including gravity <br> var accel = new vec((spring.X + resist.X)/ MASS, <br> (spring.Y + resist.Y)/ MASS + GRAVITY); <br> <br> // compute new velocity <br> dots[i].dx += (DELTAT * accel.X); <br> dots[i].dy += (DELTAT * accel.Y); <br> <br> // stop dead so it doesn"t jitter when nearly still <br> if (Math.abs(dots[i].dx) < STOPVEL && <br> Math.abs(dots[i].dy) < STOPVEL && <br> Math.abs(accel.X) < STOPACC && <br> Math.abs(accel.Y) < STOPACC) { <br> dots[i].dx = 0; <br> dots[i].dy = 0; <br> } <br> <br> // move to new position <br> dots[i].X += dots[i].dx; <br> dots[i].Y += dots[i].dy; <br> <br> // get size of window <br> var height, width; <br> if (isNetscape) { <br> height = window.innerHeight + document.scrollTop; <br> width = window.innerWidth + document.scrollLeft; <br> } else { <br> height = document.body.clientHeight + document.body.scrollTop; <br> width = document.body.clientWidth + document.body.scrollLeft; <br> } <br> <br> // bounce of 3 walls (leave ceiling open) <br> if (dots[i].Y >= height - DOTSIZE - 1) { <br> if (dots[i].dy > 0) { <br> dots[i].dy = BOUNCE * -dots[i].dy; <br> } <br> dots[i].Y = height - DOTSIZE - 1; <br> } <br> if (dots[i].X >= width - DOTSIZE) { <br> if (dots[i].dx > 0) { <br> dots[i].dx = BOUNCE * -dots[i].dx; <br> } <br> dots[i].X = width - DOTSIZE - 1; <br> } <br> if (dots[i].X < 0) { <br> if (dots[i].dx < 0) { <br> dots[i].dx = BOUNCE * -dots[i].dx; <br> } <br> dots[i].X = 0; <br> } <br> <br> // move img to new position <br> dots[i].obj.left = dots[i].X; <br> dots[i].obj.top = dots[i].Y; <br> } <br>} <br> <br>// end code hiding --> <br></> <br> <br></body> <br></html> <br></body> <br></html> <br></body> <br></html> <br></body> <br></html>