<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="500px;">
<tr>
<td style="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="100%;">
<tr>
<td><img id="small1" onclick="showbig('hiddenimg1')" src="images/image1.jpg" width="100" height="100" /></td>
<td><img id="small2" onclick="showbig('hiddenimg2')" src="images/image2.jpg" width="100" height="100" /></td>
</tr>
<tr>
<td><img id="small3" onclick="showbig('hiddenimg3')" src="images/image3.jpg" width="100" height="100" /></td>
<td><img id="small4" onclick="showbig('hiddenimg4')" src="images/image4.jpg" width="100" height="100" /></td>
</tr>
<tr>
<td><img id="small5" onclick="showbig('hiddenimg5')" src="images/image5.jpg" width="100" height="100" /></td>
<td><img id="small6" onclick="showbig('hiddenimg6')" src="images/image6.jpg" width="100" height="100" /></td>
</tr>
</table>
<script>
//默认显示第一个
showbig("hiddenimg1");
</script>
</td>
</tr>
</table>
</body>
</html>
效果图
