Example 2

Mouse Me
Mouse Me
Mouse Me
Mouse Me
Mouse Me
Mouse Me
Mouse over in any order

Onmouseover: Scroll towards or to max position
Onmouseout: Scrolls back to start










<style>
.clss2{ position:absolute; width:90px; height:25px; 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 initOA2(){ // create objects for(var i=0;i<objNum;i++){ window["myObject"+(i+1)]=new createOA2("div"+(i+1)) } endpos=document.body.clientWidth-90 } function createOA2(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,'right')} this.obj.onmouseout=function(){window["myObject"+this.num].chkStatus(this.num,'left')} this.chkStatus=function(num,d){ // method & its properties, pass div number as argument this.dir=d if(this.dir=="left"){this.running=0} if(this.dir=="right"&&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 if(this.dir=="right"){this.pos+=this.step} else{this.pos-=this.step} this.timer=setTimeout(currentObj+".animate('"+currentObj+"')",50) if(this.dir=="right"&&this.pos>10){ this.running=0 clearTimeout(this.timer) this.obj.innerHTML="Max" } if(this.dir=="left"&&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="initOA2()" 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:105">Mouse Me</div> <div id="div3" class="clss2" style="left:0;top:130">Mouse Me</div> <div id="div4" class="clss2" style="left:0;top:155">Mouse Me</div> <div id="div5" class="clss2" style="left:0;top:180">Mouse Me</div> <div id="div6" class="clss2" style="left:0;top:205">Mouse Me</div>