<style type="text/css">

*{

margin: 0 auto;

padding: 0px;

}

#div{

text-align: center;

width: 300px;

height: 150px;

}

a{

border: 1px solid #828282;

text-decoration:none;

width: 70px;

height: 60px;

text-align: center;

float: left;

}

a:hover{

color: red;

}

img{

width: 60px;

height: 45px;

}

i{

height: 50px;

filter: alpha(opacity=100;);

opacity: 1;

position:relative;

top: 0px;

}

p{

font-size: 8px;

}

</style>

<script type="text/javascript" src="move.js"></script>

<script type="text/javascript">

window.onload=function(){

var odiv=document.getElementById("div");

var alist=odiv.getElementsByTagName("a");

for(var i=0;i<alist.length;i++){

alist[i].onmouseover=function(){

var _this=this.getElementsByTagName('i')[0];

startMove(_this,{top:-20,opacity:30},function(){

_this.style.top=25+'px';

startMove(_this,{top:0,opacity:100});

});

}

// alist[i].onmouseout=function(){

// var _this=this.getElementsByTagName('i')[0];

// _this.style.top=25+'px';

// startMove(_this,{top:0,opacity:100});

// }

}

}

</script>