日期:2014-05-16  浏览次数:20316 次

鼠标移动到姓名显示照片,求高人,谢谢
HTML code
<table>
  <tr>
    <td>张三</td>
    <td rowspan="4">&nbsp;</td>
  </tr>
  <tr>
    <td>李四</td>
  </tr>
  <tr>
    <td>王五</td>
  </tr>
  <tr>
    <td>赵六</td>
  </tr>
</table>


表格分为两列,左列有若干行姓名,右列只有一行用来显示照片。当鼠标移动到姓名的时候,右面显示相应的照片。非常感谢,认真学习中。

------解决方案--------------------
HTML code
<table id="table">
  <tr>
    <td><a href="1.jpg" target="_blank">张三</a></td>
    <td rowspan="4" id="tdIMG">&nbsp;</td>
  </tr>
  <tr>
    <td><a href="2.jpg" target="_blank">李四</a></td>
  </tr>
  <tr>
    <td><a href="3.jpg" target="_blank">王五</a></td>
  </tr>
  <tr>
    <td><a href="4.jpg" target="_blank">赵六</a></td>
  </tr>
</table>

<script type="text/javascript">
window.onload=function(){
  var as=document.getElementById('table').getElementsByTagName('a');
  for(var i=0,j=as.length;i<j;i++)
   as[i].onmouseover=function(){
    document.getElementById('tdIMG').innerHTML='<img 

src="'+this.href+'" alt="'+this.innerHTML+'"/>';
  }
}
</script>