Example 4

<style>
.clss2{
position:absolute;
width:40px;
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 initOA4(){ // create objects

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

maxWidth=150
minWidth=40
}

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

this.chkStatus=function(num,d){ // method & its properties, pass div number as argument
this.dir=d
if(this.dir=="zOut"){this.running=0}
if(this.dir=="zIn"&&this.running==1){return}
this.running=1

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

this.step=20//+Math.floor(Math.random()*9)
window["myObject"+num].animate('myObject'+num)
}

this.animate=function(currentObj){ // method & its properties, pass object name as argument
if(this.dir=="zIn"){
this.obj.style.zIndex=10
this.width+=this.step
this.pos-= this.step/2
}
else{
this.obj.style.zIndex=""
this.width-=this.step/4
this.pos+= (this.step/2)/4
}
this.timer=setTimeout(currentObj+".animate('"+currentObj+"')",10)

if(this.dir=="zIn"&&this.width>maxWidth-this.step){
this.width=maxWidth
this.running=0
clearTimeout(this.timer)
}

if(this.dir=="zOut"&&this.width<=minWidth+this.step){
this.width=minWidth
this.pos=this.startPos
this.running=0
clearTimeout(this.timer)
}

this.obj.style.width=this.width
this.obj.style.left=this.pos

}

}

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

</script>

<img src="the_h2.gif" id="div1" class="clss2" style="left:100;top:80">
<img src="the_h2.gif" id="div2" class="clss2" style="left:180;top:80">
<img src="the_h2.gif" id="div3" class="clss2" style="left:260;top:80">
<img src="the_h2.gif" id="div4" class="clss2" style="left:340;top:80">
<img src="the_h2.gif" id="div5" class="clss2" style="left:420;top:80">
<img src="the_h2.gif" id="div6" class="clss2" style="left:500;top:80">