变换背景方式小结 Mr

变换背景方式：
1.通过变换背景图位置的方式变换链接的图片

.id_Bm_Bt_tc span a {
    color: #64A434;
    background: url("../image/c_more.gif") no-repeat scroll 0 2px transparent;
        display: block;
       float:right;
        line-height: 20px;
        padding-left: 20px;
}
.id_Bm_Bt_tc span a:HOVER {
    color: #999999;
    background-position:0 -18px;
}

html：

<div class="id_Bm_Bt_tc left">
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <img src="${ctp }/modulePage/index/image/e21_pi_045.jpg"/>
            </td>
            <td>
                &nbsp;社区动态
            </td>
            
            <td>
            <span>
                   <a href="${ctp }/page/forum_forum_forumIndex">详情</a>
            </span>
            </td>
        </tr>
    </table>
</div>

滑动门事件

<div id="header">
    <ul>
      <li><a href="#">Home</a></li>
      <li id="current"><a href="#">News</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
</div>


#header {
    float:left;
    100%;
    background:yellow;
    font-size:93%;
    line-height:normal;
    }

#header ul {
    margin:0;
    padding:0;
    list-style:none;
    }
#header li {
    float:left;
    margin:0;
    padding:0;
    }

#header a {
    display:block;
    }

#header li {
    float:left;
    background:url("norm_right.gif")
      no-repeat right top;
    margin:0;
    padding:0;
    }

#header a {
    display:block;
    background:url("norm_left.gif")
      no-repeat left top;
    padding:5px 15px;
    }

#header #current {
    background-image:url("norm_right_on.gif");
    }
#header #current a {
    background-image:url("norm_left_on.gif");
    }