A pretty beautiful animation. It is on the Google South Korea homepage.
Original version:
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN"
Http://www.w3.org/TR/html4/loose.dtd>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Title> test result </title>
<Style type = "text/css">
<! --
Body {text-align: center}
Table {border: 1px solid # eeeeee; padding: 3px 0; border-bottom-width: 5px}
. Icon td {width: 50px; height: 37px; background-image: url (http://www.dnew.cn/attachment/1188099824_0.gif )}
. 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 || 300)/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>
</Head>
<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>
</Html>
DIV version
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN"
Http://www.w3.org/TR/html4/loose.dtd>
<Html>
<Head>
<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; padding: 3px 0; border-bottom-width: 5px}
Label {display: block; float: left; width: 50px; height: 37px; background-image: url (http://www.dnew.cn/attachment/1188099824_0.gif )}
P {display: block; margin-TOP:-30PX; padding-top: 30px; float: left; width: 50px; height: auto; font: normal 11px verdana; cursor: 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 || 300)/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>
</Head>
<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>
</Html>