一个简单的按钮

1、

  <div  class="subm" >
                 <span class="sp">
                   <input  type="button" value="提交" onmouseover="javascript:bton(this)"   onmouseout="javascript:btover(this)"   ID="WRITE" >
                 </span>
             </div>
              <div  class="subm" >
                 <span class="sp">
                   <input  type="button" value="提交" onmouseover="javascript:bton(this)"   onmouseout="javascript:btover(this)"   ID="WRITE" >
                 </span>
             </div>
              <div  class="subm" >
                 <span class="sp">
                   <input  type="button" value="提交" onmouseover="javascript:bton(this)"   onmouseout="javascript:btover(this)"   ID="WRITE" >
                 </span>
             </div>
              <div  class="subm" >
                 <span class="sp">
                   <input  type="button" value="提交" onmouseover="javascript:bton(this)"   onmouseout="javascript:btover(this)"   ID="WRITE" >
                 </span>
             </div>

2、

<style type="text/css">
body {
    margin:0px;
    padding:0px;
}
.subm{
       height:35px;width:110px;border:0px solid red;
       background-image:url(../images/ad12.gif);
       float:left;
       padding:0px;
       margin:0px;
       margin-right:10px;
     }
.sp {
    float:left;border:0px solid red;height:35px;width:110px;vertical-align:middle;background:transparent;
    }
    input[type='button'] {
        float:left;
    
        width:100%;
        height:35px;
        background:transparent;
        cursor:pointer;
        color:white;
        border:0px solid blue;
    }
    
</style>

3、

<script type="text/javascript">
function bton(obj)
{
    
    var tt=obj.parentNode.parentNode;
    tt.style.backgroundImage="url(../images/ad23.gif)";
 
}
function btover(obj)
{
    
    var tt=obj.parentNode.parentNode;
    tt.style.backgroundImage="url(../images/ad12.gif)";
 
}
</script>

 

转载于:https://www.cnblogs.com/trustnature/articles/3251450.html