\
css
*{
margin:0;
padding:0;
list-style:none;}
#main{
height:440px;
width:430px;
border:solid 2px #9DD7D6;
margin:0 auto;}
#m-top{
margin:0 auto;
margin-left:20px;
width:360px;
background:url(../images/01big.jpg) no-repeat;
height:360px;
background-color:#E8E6E6;}
#main ul li{
height:72px;
width:73px;
float:left;
margin:4px;
border:#8099BC 2px solid;\
}
\
html
<body>
<div id="main">
<div id="m-top"></div>
<ul>
<li id="pic1"><img src="images/01.jpg"></li>
<li id="pic2"><img src="images/02.jpg"></li>
<li id="pic3"><img src="images/03.jpg"></li>
<li id="pic4"><img src="images/04.jpg"></li>
<li id="pic5"><img src="images/05.jpg"></li>
</ul>
</div>
<script>
window.οnlοad=function(){
//定义方法 通过id获取对象
function getObj(getId){
return document.getElementById(getId);
}
//获取对象
var opicbox=getObj('m-top');
var opic1=getObj('pic1');
var opic2=getObj('pic2');
var opic3=getObj('pic3');
var opic4=getObj('pic4');
var opic5=getObj('pic5');
// 定义函数 改变背景图片
function changeBgImg(obj,url){
obj.style.backgroundImage=url;
}
opic1.οnmοuseοver=function(){
changeBgImg(opicbox,'url(images/01big.jpg)');}
opic2.οnmοuseοver=function(){
changeBgImg(opicbox,'url(images/02big.jpg)');}
opic3.οnmοuseοver=function(){
changeBgImg(opicbox,'url(images/03big.jpg)');}
opic4.οnmοuseοver=function(){
changeBgImg(opicbox,'url(images/04big.jpg)');}
opic5.οnmοuseοver=function(){
changeBgImg(opicbox,'url(images/05big.jpg)');}
}
</script>
</body>\
