<html>
<body>
<script type="text/JavaScript">
function showbig(bigid){ //设置全部隐藏var objHidden;for(var i=1; i <= 6; i++){ objHidden = document.getElementById('hiddenimg'+i); objHidden.style.display = "none";}var cubObj = document.getElementById(bigid);cubObj.style.display = "block";}
</script>
<table style="width:500px;"><tr><td style="width:300px;"> <div id="hiddenimg1" style="display:none;"><img src="images/image1_big.jpg" width="280" height="500" /></div> <div id="hiddenimg2" style="display:none;"><img src="images/image2_big.jpg" width="280" height="500" /></div> <div id="hiddenimg3" style="display:none;"><img src="images/image1_big.jpg" width="280" height="500" /></div> <div id="hiddenimg4" style="display:none;"><img src="images/image1_big.jpg" width="280" height="500" /></div> <div id="hiddenimg5" style="display:none;"><img src="images/image1_big.jpg" width="280" height="500" /></div> <div id="hiddenimg6" style="display:none;"><img src="images/image1_big.jpg" width="280" height="500" /></div></td>
<td><table style="width:100%;"><tr><td><img id="small1" οnclick="showbig('hiddenimg1')" src="images/image1.jpg" width="100" height="100" /></td><td><img id="small2" οnclick="showbig('hiddenimg2')" src="images/image2.jpg" width="100" height="100" /></td></tr><tr><td><img id="small3" οnclick="showbig('hiddenimg3')" src="images/image3.jpg" width="100" height="100" /></td><td><img id="small4" οnclick="showbig('hiddenimg4')" src="images/image4.jpg" width="100" height="100" /></td></tr><tr><td><img id="small5" οnclick="showbig('hiddenimg5')" src="images/image5.jpg" width="100" height="100" /></td><td><img id="small6" οnclick="showbig('hiddenimg6')" src="images/image6.jpg" width="100" height="100" /></td></tr></table><script>//默认显示第一个showbig("hiddenimg1");</script></td></tr></table></body>
</html>效果图
