JS如何实现图片放大效果
本帖最后由 ealzero 于 2011-06-01 23:47:48 编辑 我想用div+css和表格，并结合js实现，当鼠标移动至左边的任一图像上时，右边显示其对应的放大图片，默认即当鼠标没移动至图上时右边总是显示第一个图像。可我做出来的效果却是右边总是显示第一个图像，所以麻烦各位帮我指点下---是什么原因造成的？或有什么好的方法来实现这效果？
<style type="text/css">
table{
border:3px soild black;
position:relative;
}
table#special{
border:3px soild black;
position:relative;
left:212px;
top:-445px;
}
</style>
<script type="text/javascript">
window.onload= function show(){
if(this.onmouseover==document.getElementById("11").onmouseover)
{
document.getElementById("1").style.display="block";
document.getElementById("2").style.display="none";
document.getElementById("3").style.display="none";
}
else if(this.onmouseover==document.getElementById("22").onmouseover)
{
document.getElementById("1").style.display="none";
document.getElementById("2").style.display="block";
document.getElementById("3").style.display="none";
}
else if(this.onmouseover==document.getElementById("33").onmouseover)
{
document.getElementById("1").style.display="none";
document.getElementById("2").style.display="none";
document.getElementById("3").style.display="block";
}
else if(this.onmouseout==document.getElementById("11").onmouseout)
{
document.getElementById("1").style.display="block";
document.getElementById("2").style.display="none";
document.getElementById("3").style.display="none";
}
else if(this.onmouseout==document.getElementById("22").onmouseout)
{
document.getElementById("1").style.display="block";
document.getElementById("2").style.display="none";
document.getElementById("3").style.display="none";
}
else if(this.onmouseout==document.getElementById("33").onmouseout)
{
document.getElementById("1").style.display="block";
document.getElementById("2").style.display="none";
document.getElementById("3").style.display="none";
}
}
</script>
</head>
<body>
<table width="200" border="1">
<tr>
<td width="200" height="145" nowrap="nowrap" id="11"><img src="DSC00303xx.jpg" width="200" height="145" /></td>
</tr>
<tr>
<td width="200" height="145" nowrap="nowrap" id="22"><img src="DSC00304xx.jpg" width="200" height="145" alt="JS怎么实现图片放大效果" /></td>
</tr>
<tr>
<td width="200" height="145" nowrap="nowrap" id="33"><img src="DSC00305xx.jpg" width="200" height="145" alt="JS怎么实现图片放大效果" /></td>
</tr>
</table>
<table width="451" border="1" id="special">
<tr>
<td width="572" height="415" nowrap="nowrap"><div id="1"><img src="file:///H|/zp/img/DSC00303xxx.jpg" width="572" height="415" alt="JS怎么实现图片放大效果" /></div><div id="2"><img src="file:///H|/zp/img/DSC00304xxx.jpg" width="572" height="415" alt="JS怎么实现图片放大效果" /></div><div id=3><img src="file:///H|/zp/img/DSC00305xxx.jpg" width="572" height="415" alt="JS怎么实现图片放大效果" /></div></td>
</tr>
</table>
</body>
</html>
