Mouseover Mouseout鼠标移入图片显示大图！

未经优化的代码（能实现）：
CSS代码：

.main{
   margin-top: 20px; 
   margin-left: 500px; 
   height:100px;
   width:500px;
   position: relative;
}
  #box{
  	position: absolute;
  	top:20px;
  	left: 20px;
  	height: 100px;
  	width: 100px;
  }
  #img1{
  	position: absolute;
  	left: 0;
  	top:0;
  }
  #img2{
  	position: absolute;
  	left: 150px;
  	top: 0;
  }
  #img3{
    position: absolute;
    left:300px;
    top:0;
  }
</style>
   //容器
<div class="main">     
<img id="img1" src="img/f2.jpg" width="100px"
 height="100px" alt="">
 <img id="img2" src="img/f3.jpg" width="100px" height="100px">
 <img id="img3" src="img/f4.jpg" width="100px" height="100px">
 </div>
 //显示大图容器
 <img id="box" style="display: none"></img>

JS代码：

 	window.onload=function(){
 	document.getElementById('img1').onmouseover=function(){
 	document.getElementById('box').style.display="block";
 	document.getElementById('box').style.width='300px';
 	document.getElementById('box').style.height='300px';
 	document.getElementById('box').src="img/f2.jpg";
    };	
    document.getElementById('img1').onmouseout=function(){
    document.getElementById('box').style.display="none";
 	document.getElementById('box').style.width='100px';
 	document.getElementById('box').style.height='100px';
    };	
    document.getElementById('img2').onmouseover=function(){
 	document.getElementById('box').style.display="block";
 	document.getElementById('box').style.width='300px';
 	document.getElementById('box').style.height='300px';
 	document.getElementById('box').src="img/f3.jpg";
    };	
    document.getElementById('img2').onmouseout=function(){
    document.getElementById('box').style.display="none";
 	document.getElementById('box').style.width='100px';
 	document.getElementById('box').style.height='100px';
    };	
     document.getElementById('img3').onmouseover=function(){
  document.getElementById('box').style.display="block";
  document.getElementById('box').style.width='300px';
  document.getElementById('box').style.height='300px';
  document.getElementById('box').src="img/f4.jpg";
    };  
    document.getElementById('img3').onmouseout=function(){
    document.getElementById('box').style.display="none";
  document.getElementById('box').style.width='100px';
  document.getElementById('box').style.height='100px';
    };