【汇智学堂】-div+css布局十五(汇智学堂主页-工程项目展示）

效果图：

html文件的第一行div：

<div style="height: 250px;">
    		<div style="margin:0 auto;width: 1200px;">
    			<img id="img01" src="img/101.png" style="float: left;width: 400px;height: 250px;" onmouseover="changeimg('img01')" onmouseout="changeimg2('img01')">    			
    		</div>
    		
    		<div>
    			<img id="img02" src="img/102.png" style="float: left;width: 400px;height: 250px;" onmouseover="changeimg('img02')" onmouseout="changeimg2('img02')"> 
    		</div>
    		
    		<div>
    			<img id="img03" src="img/103.png" style="float: left;width: 400px;height: 250px;" onmouseover="changeimg('img03')" onmouseout="changeimg2('img03')"> 
    		</div>
    		
    	</div>

js文件的内容：

<script type="text/javascript">
	function changeimg(id){
		var a=document.getElementById(id);
		switch (id){
		  case "img01":
		  a.src="img/1011.png";
		  break;
		  case "img02":
		   a.src="img/1012.png";
		   break;
		  
		  case "img03":
		  a.src="img/1013.png";
		  break;		  
		  
		  case "img04":
		   a.src="img/1014.png";
		   break;
		   
		   case "img05":
		  a.src="img/1015.png";
		  break;
		  case "img06":
		   a.src="img/1016.png";
		   break;	   
		  
		   case "img07":
		  a.src="img/1017.png";
		  break;
		  case "img08":
		   a.src="img/1018.png";		  
		   break;
		   
		   case "img09":
		  a.src="img/1019.png";
		  break;
		  case "img010":
		   a.src="img/1020.png";
		   break;
		   
		   case "img011":
		  a.src="img/1021.png";
		  break;
		  case "img012":
		   a.src="img/10122.png";
		   break;
		}
	}

	function changeimg2(id){
		//alert(id);
		var a=document.getElementById(id);			
		switch (id){
		  case "img01":
		  a.src="img/101.png";
		 break;
		 case "img02":
		 a.src="img/102.png";
		 break;			
		case "img03":
		  a.src="img/103.png";
		 break;			 
		 case "img04":
		 a.src="img/104.png";
		 break;	
		case "img05":
		  a.src="img/105.png";
		 break;
		 case "img06":
		 a.src="img/106.png";
		 break;			
		case "img07":
		  a.src="img/107.png";
		 break;
		 case "img08":
		 a.src="img/108.png";
		 break;			
		case "img09":
		  a.src="img/109.png";
		 break;
		 case "img010":
		 a.src="img/1010.png";
		 break;		
		case "img011":
		  a.src="img/10111.png";
		 break;
		 case "img012":
		 a.src="img/10121.png";
		 break;
		}
	}
</script>