Example 1

<style>
.clss2{
position:absolute;
width:90px;
background-color:#c3bfa4;
border:2px inset #c3bfa4;
color:red;
text-align:center
}
</style>

<script type="text/javascript">

objNum=6

function initOA1(){ // create objects

for(var i=0;i<objNum;i++){
window["myObject"+(i+1)]=new createOA1("div"+(i+1))
}

endpos=document.body.clientWidth-90
}

function createOA1(id){ //define properties, pass id
this.obj=document.getElementById(id)
this.pos=parseInt(this.obj.style.left)
this.timer=null
this.running=0

this.obj.num=id.replace(/[^0-9]/g,'')
this.obj.onmouseover=function(){window["myObject"+this.num].chkStatus(this.num)}

this.chkStatus=function(num){ // method & its properties, pass div number as argument
if(this.running==1){return}
this.running=1
this.step=5+Math.floor(Math.random()*9)
window["myObject"+num].animate('myObject'+num)

this.obj.innerHTML="Speed = "+this.step
}

this.animate=function(currentObj){ // method & its properties, pass object name as argument
this.pos+=this.step
this.timer=setTimeout(currentObj+".animate('"+currentObj+"')",50)

if(this.pos>endpos){
this.pos=0
this.running=0
clearTimeout(this.timer)
this.obj.innerHTML="Speed = 0"
}

this.obj.style.left=this.pos

}

}

// add  onload="initOA1()" to the opening BODY tag

</script>

<div id="div1" class="clss2" style="left:0;top:105">></div>
<div id="div2" class="clss2" style="left:0;top:130">></div>
<div id="div3" class="clss2" style="left:0;top:155">></div>
<div id="div4" class="clss2" style="left:0;top:180">></div>
<div id="div5" class="clss2" style="left:0;top:205">></div>
<div id="div6" class="clss2" style="left:0;top:230">></div>