页面图片按钮案例 

<!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>

   这是图片样式：

posted @ 2015-12-22 22:29  孤舟残月浅笑嫣然  阅读(143)  评论(0)  编辑  收藏  举报