A pretty animated effect. is on the home page of Google Korea.
Original:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en"
"Http://www.w3.org/TR/html4/loose.dtd" >
<meta http-equiv= "Content-type" content= "text/html;charset=gb2312" >
<title> Test Effect </title>
<style type= "Text/css" >
<!--
Body {Text-align:center}
Table {border:1px solid #eeeeee;p adding:3px 0;border-bottom-width:5px}
. icon TD {Width:50px;height:37px;background-image:url (YUN_QI_IMG/1188099824_0.)}
. Capt TD {Font:normal 11px VERDANA;PADDING:2PX 0}
. a {background-position-y:0px}
. b {BACKGROUND-POSITION-Y:-37PX}
. c {BACKGROUND-POSITION-Y:-74PX}
. d {BACKGROUND-POSITION-Y:-111PX}
. e {background-position-y:-148px}
. f {background-position-y:-185px}
. g {BACKGROUND-POSITION-Y:-222PX}
. F1 {background-position-x:0px}
. f2 {background-position-x:-51px}
. f3 {background-position-x:-101px}
. f4 {BACKGROUND-POSITION-X:-153PX}
. f5 {background-position-x:-205px}
. f6 {BACKGROUND-POSITION-X:-257PX}
. F7 {BACKGROUND-POSITION-X:-309PX}
-->
</style>
<script language= "JavaScript" >
Window.onload=function () {
var tt=document.getelementsbytagname (' table ') [0];
var cs=tt.rows[1].cells,ct=tt.rows[0].cells;
for (Var i=0;i<cs.length;i++)
Cssani (cs[i],ct[i],7);
}
function Cssani (osrc,otarget,num,duration) {
var T=null,c=1,d=0,n=0,i=math.floor (duration| | )/num);
var s=otarget.classname.replace (/.$/, '), r=/over/;
Osrc.onmouseover=osrc.onmouseout=function (e) {
N=r.test (e| | event). type)? 1:-1;
if (!t) T=setinterval (function () {
if (c==1| | C==num) && (d==n| | C+N<1) | |! (d=n)))
return Clearinterval (t), t=null;
otarget.classname=s+ (C+=d);
},i);
};
}
</script>
<body>
<table>
<tr class= ' icon ' >
<td class= ' A F1 ' ></td>
<TD class= ' b F1 ' ></td>
<TD class= ' C F1 ' ></td>
<TD class= ' d F1 ' ></td>
<TD class= ' e F1 ' ></td>
<td class= ' F F1 ' ></td>
<td class= ' G F1 ' ></td>
</tr>
<tr class= ' Capt ' >
<td><a href= ' #; >A</a></td>
<td><a href= ' #; >B</a></td>
<td><a href= ' #; >C</a></td>
<td><a href= ' #; >D</a></td>
<td><a href= ' #; >E</a></td>
<td><a href= ' #; >F</a></td>
<td><a href= ' #; >G</a></td>
</tr>
</table>
</body>
Div version
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en"
"Http://www.w3.org/TR/html4/loose.dtd" >
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<title> Untitled Document </title>
<style type= "Text/css" >
<!--
Body {Text-align:center}
div {width:381px border:1px solid #eeeeee;p adding:3px 0;border-bottom-width:5px}
label {display:block; float:left; Width:50px;height:37px;background-image:url (Yun_qi_img/1188099824_0.)}
p {display:block; margin-top:-30px; padding-top:30px; float:left; width:50px; height:auto; font:normal 11px verdana; cur Sor:pointer;}
. a {background-position-y:0px}
. b {BACKGROUND-POSITION-Y:-37PX}
. c {BACKGROUND-POSITION-Y:-74PX}
. d {BACKGROUND-POSITION-Y:-111PX}
. e {background-position-y:-148px}
. f {background-position-y:-185px}
. g {BACKGROUND-POSITION-Y:-222PX}
. F1 {background-position-x:0px}
. f2 {background-position-x:-51px}
. f3 {background-position-x:-101px}
. f4 {BACKGROUND-POSITION-X:-153PX}
. f5 {background-position-x:-205px}
. f6 {BACKGROUND-POSITION-X:-257PX}
. F7 {BACKGROUND-POSITION-X:-309PX}
-->
</style>
<script language= "JavaScript" >
Window.onload=function () {
var tt=document.getelementsbytagname (' div ') [0];
var cs=tt.getelementsbytagname (' label '), Ct=tt.getelementsbytagname (' P ');
for (Var i=0;i<cs.length;i++)
Cssani (ct[i],cs[i],7);
}
function Cssani (osrc,otarget,num,duration) {
var T=null,c=1,d=0,n=0,i=math.floor (duration| | )/num);
var s=otarget.classname.replace (/.$/, '), r=/over/;
Osrc.onmouseover=osrc.onmouseout=function (e) {
N=r.test (e| | event). type)? 1:-1;
if (!t) T=setinterval (function () {
if (c==1| | C==num) && (d==n| | C+N<1) | |! (d=n)))
return Clearinterval (t), t=null;
otarget.classname=s+ (C+=d);
},i);
};
}
</script>
<body>
<div>
<label class= ' A F1 ' ></label><label class= ' b F1 ' ></label><label class= ' C F1 ' ></label ><label class= ' d F1 ' ></label><label class= ' e F1 ' ></label><label class= ' F F1 ' ></ Label><label class= ' G F1 ' ></label>
<p>a</p><p>b</p><p>c</p><p>d</p><p>e</p><p>f </p><p>G</p>
</div>
</body>
