Return to Main Menudzigns by ShivSpacer
 
Explanation


Here's yet another Example of DHTML Animation. As usual, works only on Fourth Generation or Higher Browser. But, frankly, how you want to make use of this script is really upto you. I can not say, it's very useful. Adds a bit of "spice" to your page, that's about all!

Basically, the Script isn't much different from a straight line horizontal animation - if you have seen the Example called DHTML Divider. One main difference is that you'll have to set the "X path" & the "Y path" in separate arrays. The point to remember, however, is that the number of co-ordinates in the X & Y paths MUST be equal. That is, if you have specified say, 10 positions on X path, then there MUST be 10 positions in Y path too. In this Example, I have used 40 positions each.

There just two other vaiables that you can change, if you wish.
dbs1.pathloop = 1 - Changing this to 0 will stop the animation after one cycle, and
speed = .07 - Which ofcourse sets the speed!!

The script

Paste this section within the HEAD tags

<script language="javascript">
<!-- hide from old browsers
// Written & created by Shivaji Basu
// Copyright www.shivbasu.com
// Use this script at your own risk
// To use his script, you MUST leave this disclaimer & credit as it is

ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false

function init() {
if(ns4||ie4){
if (ns4) {
dbs1 = document.dbsPic
}

else
if (ie4) {
dbs1 = dbsPic.style
}

dbs1.xpos = parseInt(dbs1.left)
dbs1.ypos = parseInt(dbs1.top)

dbs1.pathx = new Array(40,55,76,103,133,164,192,222,263,320,346,382,423,467,502,545,
525,512,488,456,426,395,362,343,319,289,272,286,301,273,244,
202,167,132,107,78,54,32,43)

dbs1.pathy = new Array(49,76,93,125,159,176,197,203,207,231,267,302,310,332,304,301,
253,222,185,154,121,102,74,57,59,81,109,138,153,140,114,89,
53,43,42,40,38,35,33)

dbs1.pathpos = 0
dbs1.active = 1
dbs1.pathloop = 1
speed = .07

dbs1anim()
}
}
function dbs1anim() {
if (dbs1.active && dbs1.pathpos < dbs1.pathx.length) {
dbs1.xpos = dbs1.pathx[dbs1.pathpos]
dbs1.ypos = dbs1.pathy[dbs1.pathpos]
dbs1.left = dbs1.xpos
dbs1.top = dbs1.ypos
dbs1.pathpos += 1
setTimeout("dbs1anim()",speed*2000)
}
else {
if (dbs1.active && dbs1.pathloop) {
dbs1.pathpos = 0
dbs1anim()
}
else dbs1.active = 0
}
}

//-->
</script>

<!--This Style specification sets the initial position of the Image -->

<style type="text/css">
<!--
#dbsPic {POSITION: absolute; LEFT: 10px; TOP: 5px;HEIGHT: 50px; WIDTH: 50px
}
-->
</style>

Paste this part within the OPENING Body tag for Auto execute

<BODY onload="init()" background="" bgcolor="" .....>
// Fill in the Background Image URL, BG color etc as normal

Paste this in the main Body

<script language="javascript">
<!--
if(ns4||ie4){
document.writeln('<DIV id="dbsPic"><img src="dbsround.gif" border=0 height=50 width=50></DIV>')
}
//-->
</script>



Copyright DBS © 1998-2003. All Rights Reserved