首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

鼠标移动到姓名显示照片,求高人,多谢

2012-09-23 
鼠标移动到姓名显示照片,求高人,谢谢HTML codetabletrtd张三/tdtd rowspan4 /td/trtr

鼠标移动到姓名显示照片,求高人,谢谢

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> 

热点排行