1 <html>
2 <head>
3 <title>1</title>
4 <style type='text/css'>
5 #box{
6 background:url(stars-five.jpg) no-repeat 0 0;
7 height:18px;
8 width:80px;
9 border:solid 1px green;
10 overflow:hidden;
11 }
12 </style>
13 </head>
14 <body>
15 <div id='box' onmousemove="fun();" onclick="fun2();">
16 </div>
17 <script language='javascript'>
18 //16
19 function fun(){
20 var x=event.offsetX;
21 var y;
22 if(x<=16){
23 y=16;
24 }else if(x<=32){
25 y=32;
26 }else if(x<=48){
27 y=48;
28 }else if(x<=64){
29 y=64;
30 }else if(x<=80){
31 y=80;
32 }
33 var obj=document.getElementById('box');
34 obj.style.backgroundPosition="0 -"+y;
35 }
36 function fun2(){
37 var obj=document.getElementById('box');
38 obj.onmousemove=null;
39 }
40
41 </script>
42
43 </body>
44 </html>
