<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns=""><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript"> //创建一个函数并有X,Y两个参数用来接收坐标 function Changeimg(x,y){ //获得ID为a的对象 var aa = document.getElementById("a"); //把传参的坐标定义成字符串 var bb = x+"px "+" "+y+"px"; aa.style.backgroundPosition = bb;}
</script><style type="text/css"> #a{ width:16px; height:16px; background-image:url(9-16.png); background-position:-240px -380px; }</style></head>
<body>
<div id="a"></div> <!-- 点击超链接触发javascript --> <a href="javascript:Changeimg(-240,-180)">变1</a> <a href="javascript:Changeimg(-220,-180)">变2</a> <a href="javascript:Changeimg(-260,-180)">变3</a> <a href="javascript:Changeimg(-240,-380)">变4</a> </body></html>
在网页中利用CSS Sprite技术图片不同部位截取,可有利于网页的加载速度