效果图:
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>