Example 5

<style>
.clss2{
position:absolute;
width:40px;
background-color:#c3bfa4;
border:2px outset #c3bfa4;
color:red;
text-align:center;
z-index:5;
cursor:hand;
filter:alpha(opacity=20);
opacity:0.2
}
</style>

<script type="text/javascript">

objNum=6
maxWidth=100
minWidth=40
maxOpac=100
minOpac=30

function initOA5(){ // create objects
for(var i=0;i<objNum;i++){
window["myObject"+(i+1)]=new createOA5("div"+(i+1))
}
}

function createOA5(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.obj.num=id.replace(/[^0-9]/g,'')
this.obj.onmouseover=function(){window["myObject"+this.num].chkStatus(this.num,'d_in')}
this.obj.onmouseout=function(){window["myObject"+this.num].chkStatus(this.num,'d_out')}

if(this.obj.filters){
this.opac=this.obj.filters.alpha.opacity
}
else{
this.opac=this.obj.style.opacity*100
}

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

this.step=20//+Math.floor(Math.random()*9)

this.opac_width=(maxWidth-minWidth)/this.step
this.opac_step=(maxOpac-minOpac)/this.opac_width

window["myObject"+num].animate('myObject'+num)
}

this.animate=function(currentObj){ // method & its properties, pass object name as argument
if(this.dir=="d_in"){
this.obj.style.zIndex=10
this.width+=this.step
this.pos-= this.step/2
this.opac+=this.opac_step

}
else{
this.obj.style.zIndex=""
this.width-=this.step/4
this.pos+= (this.step/2)/4
this.opac-=this.opac_step/4
}
this.timer=setTimeout(currentObj+".animate('"+currentObj+"')",10)

if(this.dir=="d_in"&&this.width>maxWidth-this.step){
this.width=maxWidth
this.running=0
this.opac=maxOpac

clearTimeout(this.timer)
}

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

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

if(this.obj.filters){
this.obj.filters.alpha.opacity=this.opac
}
else{
this.obj.style.opacity=(this.opac/100)-0.01
}
}

}

// add  onload="initOA5()" 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">