JS如何实现图片放大效果

ealzero 2011-06-01 09:30:50

我想用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="" /></td>

  </tr>

  <tr>

    <td width="200" height="145" nowrap="nowrap" id="33"><img src="DSC00305xx.jpg" width="200" height="145" alt="" /></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="1" /></div><div id="2"><img src="file:///H|/zp/img/DSC00304xxx.jpg" width="572" height="415" alt="2" /></div><div id=3><img src="file:///H|/zp/img/DSC00305xxx.jpg" width="572" height="415" alt="3" /></div></td>

  </tr>

</table>

</body>

</html>