Example 3

<style>
.clss2{
position:absolute;
width:90px;
background-color:#c3bfa4;
border:2px outset #c3bfa4;
color:red;
text-align:center;
z-index:5;
cursor:hand
}
</style>

<script type="text/javascript">

objNum=6

function initOA3(){ // create objects

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

endpos=document.body.clientWidth-90
}

function createOA3(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,d){ // method & its properties, pass div number as argument
this.num=num
if(this.chkStatus.arguments.length==1){this.dir=1}
else{this.dir=d}
this.step=10 // +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
if(this.dir==1){this.pos+=this.step}
else{this.pos-=this.step}
clearTimeout(this.timer)
this.timer=setTimeout(currentObj+".animate('"+currentObj+"')",50)

if(this.dir==1&&this.pos>endpos){
window["myObject"+this.num].chkStatus(this.num,0)
this.obj.innerHTML="Mouse Me"
}

if(this.dir==0&&this.pos<=0){
this.pos=0
this.running=0
clearTimeout(this.timer)
this.obj.innerHTML="Mouse Me"
}

this.obj.style.left=this.pos

}

}

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

</script>

<div id="div1" class="clss2" style="left:0;top:80">Mouse Me</div>
<div id="div2" class="clss2" style="left:0;top:110">Mouse Me</div>
<div id="div3" class="clss2" style="left:0;top:140">Mouse Me</div>
<div id="div4" class="clss2" style="left:0;top:170">Mouse Me</div>
<div id="div5" class="clss2" style="left:0;top:200">Mouse Me</div>
<div id="div6" class="clss2" style="left:0;top:230">Mouse Me</div>