Animation

<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=30)
}
</style>

<script type="text/javascript">

objNum=6
minOpac=30
maxOpac=100

function initOA6(){ // create objects

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

}

function createOA6(id){ //define properties, pass id
this.obj=document.getElementById(id)
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.opacStepUp=(maxOpac-minOpac)/5
this.opacStepDn=(maxOpac-minOpac)/10
window["myObject"+num].animate('myObject'+num)
}

this.animate=function(currentObj){ // method & its properties, pass object name as argument
if(this.dir=="d_in"){
this.opac=(this.opac+this.opacStepUp)*1
}
else{
this.opac=(this.opac-this.opacStepDn)*1
}
this.timer=setTimeout(currentObj+".animate('"+currentObj+"')",50)

if(this.dir=="d_in"&&this.opac>maxOpac-this.opacStepUp){
this.running=0
this.opac=maxOpac
clearTimeout(this.timer)
}

if(this.dir=="d_out"&&this.opac<minOpac+this.opacStepDn){
this.running=0
this.opac=minOpac
clearTimeout(this.timer)
}

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

}

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

</script>
Example 6
