背景图只有一张

第一种方法

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #btn{
            background: url("1.png");
            width: 120px;
            height: 30px;
            border-style: none;
        }
    </style>
</head>
<body>
<button id="btn"  onmouseover="changeImg()"   onmouseout="changeImg()">切换图片</button>
<script>
    var m = 1;
    function changeImg(){
        var img = document.getElementById("btn");
        if(m == 1){
             img.style.backgroundPosition = '0px -30px';
             m = 2;
        }else{
             img.style.backgroundPosition = '0px 0px';
             m = 1;
        }
    }
</script>
</body>
</html>

第二种方法
  前面与第一种方法类似，这种方法是通过display属性实现的
<body>
       <input type="button" id="btn" value="切换图片" onmouseover="changeImg()"   onmouseout="changeImg()">
       <input type="button" id="btn1" value="切换图片" style="display: none"  onmouseover="changeImg()"   onmouseout="changeImg()">
<script>
    function changeImg(){
        var btn = document.getElementById("btn");
        var btn1 = document.getElementById("btn1");

        if(btn1.style.display == "none"){
            btn1.style.display = "block";
            btn.style.display = "none";
        }else{
            btn.style.display = "block";
            btn1.style.display = "none";
        }
    }
</script>
</body>
第三种方法
与第二种方法基本雷同
<input type="button" id="btn" value="切换图片" onmouseover="changeImg()"   onmouseout="changeImg()">
<input type="hidden" id="btn1" value="切换图片" onmouseover="changeImg()"   onmouseout="changeImg()">
<script>
    function changeImg(){
        var btn = document.getElementById("btn");
        var btn1 = document.getElementById("btn1");

        if(btn.type == "button"){
            btn1.type = "button";
            btn.type = "hidden";
        }else{
            btn.type = "button";
            btn1.type = "hidden";
        }
    }
</script>
第四种方法是用jQuery实现的
html文件：
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.1.0.min.js"></script>
    <script src="jcss.js"></script>
    <link rel="stylesheet" type="text/css" href="jcss.css">
</head>
<body>
    <button></button>
</body>
</html>
引入文件的时候要注意，把下载的jquery文件放在前面
css文件：
.img1,.img2{
    background-image: url("1.png");
    width: 120px;
    height: 30px;
    border-style: none;
}
.img2{
    background-position: 0px -30px;
}

js文件：
$(document).ready(function(){
    $("button").addClass("img1");
    $("button").mouseover(function () {
        $("button").addClass("img2");
        $("button").removeClass("img1");
    }).mouseout(function(){
        $("button").addClass("img1");
        $("button").removeClass("img2");
    })
})