<!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> function click_a(){ alert("按钮点击事件1！") } function click_b(){ alert("按钮点击事件2！") } </script> <title>Document</title> </head> <body> <a onclick="click_a()" style="position: absolute; top: 130px; left:180px; display:block;width:71px;height: 21px; background: url(http://sm.beycheer.com/kfbox/13/0703_blue/btn.gif) no-repeat;" onmouseover="this.style.backgroundPosition=‘0 -22px‘" onmouseout="this.style.backgroundPosition=‘0 0‘"></a> <a onclick="click_b()" style="position: absolute; top: 130px; left: 260px; display:block;width:71px;height: 21px; background: url(http://sm.beycheer.com/kfbox/13/0703_blue/btn.gif) -72px 0 no-repeat" onmouseover="this.style.backgroundPosition=‘-72px -22px‘" onmouseout="this.style.backgroundPosition=‘-72px 0‘"> </body> </body> </html>
这是图片样式：
原文：http://www.cnblogs.com/qingsong/p/5068391.html