需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：
div{height: 80pxbackground: url(small3.png)}div:hover{background: url(small2.png)}。
3、浏览器运行index.html页面，此时div显示的背景图片是small3.png。
4、将鼠标移入div，此时背景图片自动变更成了small2.png。
使用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
}
不用那么麻烦，活用a标签就可以了<style type="text/css">
a.home {background:url(鼠标滑过之前的图片地址) no-repeatwidth:100pxheight:20pxdisplay:inline-block_float:left}
a.home:hover {background:url(鼠标滑过的图片地址) no-repeat
</style>
<div>
<a href="http://www.baidu.com" class="home">首页</a>
</div>
这样就可以实现有链接的可以换图的效果
