<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" >
<title></title>
<style>
img{width: 100px;height: 100px;border: 1px solid #A9A9A9;margin: 20px auto;}
#maxPic{width:256px;height:256px;background: url(img/0.png) no-repeat;}
</style>
</head>
<body>
<img src="img/0.png" />
<img src="img/1.png" />
<img src="img/2.png" / >
<img src="img/3.png" />
<div id= "maxPic"></div>
<script>
onload =function(evt){
var div = $("maxPic");
var e = evt||event;
var img = document.getElementsByTagName('img');
var bg=getStyle(div,"background")
for(var i = 0;i <= img.length-1;i++){
img[i].index=i;
img[i].onmouseover= function(){
div.style.background ="url(img/"+this.index+".png)";
}
}
}
//获取元素
function $(id){
return document.getElementById(id);
//获取非行间样式的值
function getStyle(obj,att){
if(obj.currentStyle){
return obj.currentStyle[att];
}else{
return getComputedStyle(obj,null)[att];
}
}
}
</script>
</body>
</html>
