1、新建html文档。
2、准备好需要用到的图标。
3、书写hmtl代码。<div id="aaaa"><ul>，<li><img src="lanren01.jpg" width="218" height="155" /><h2>成都康定理塘稻城亚丁然后说再见</h2></li>。
4、书写css代码。<style>*{ margin:0padding:0list-style:none}img{ border:0}body{ background:#000}；#aaaa{ width:460pxheight:automargin:150px autooverflow:hidden}。
5、书写并添加js代码。<script src="jquery.min.js"></script><script>$(function(){var imgs = $('#aaaa li')
6、代码整体结构。
写了个例子:<a
href="#"><img
src="http://img.baidu.com/img/logo-zhidao.gif"
border="0"
onMouseOver="this.src='http://www.google.cn/intl/zh-CN/images/logo_cn.gif'"
onMouseOut="this.src='http://img.baidu.com/img/logo-zhidao.gif'"
/></a>
给img标签加个属性:border="0"后,就不会有边框了
图片的高度和宽度可以不用设定,只是设置了鼠标的两种状态,切换的其实是图片的地址src
使用jquery的toggle方法进行图片切换：
$(function(){
$("#h1").toggle(function(){
$("#h1").css("background-image","路径('./20110528073501b54e6.jpg')")
},function(){
$("#h1").css("background-image","路径('./2011060708410874041.jpg')")
})
})
<input type="button" value="huan" id="h1" class="hh1" />
CSS
.hh1{
background: url("./2011060708410874041.jpg")
width: 120px
height: 90px
}
