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

<table>
  <tr>
    <td>张三</td>
    <td rowspan="4"> </td>
  </tr>
  <tr>
    <td>李四</td>
  </tr>
  <tr>
    <td>王五</td>
  </tr>
  <tr>
    <td>赵六</td>
  </tr>
</table>表格分为两列，左列有若干行姓名，右列只有一行用来显示照片。当鼠标移动到姓名的时候，右面显示相应的照片。非常感谢，认真学习中。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<table id="table">
  <tr>
    <td><a href="1.jpg" target="_blank">张三</a></td>
    <td rowspan="4" id="tdIMG"> </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>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var imges=[];
imges.push("1.jpg");
imges.push("2.jpg");
imges.push("3.jpg");
imges.push("4.jpg");
var td=[];
function init(){
var tds=document.getElementsByTagName("td");
for(var i=0;i<tds.length;i++){
if(tds[i].innerHTML.indexOf("<img")==-1){
td.push(tds[i]);
}
}
for(var i=0;i<td.length;i++){
td[i].setAttribute("num",i);
td[i].onmouseover=show;
td[i].onmouseout=hide;
}
}
function show(){
var i=this.getAttribute("num");
document.images[0].setAttribute("src",imges[i]);
}
function hide(){
document.images[0].src="";
}
window.onload=init;
</script>
</head><body>
<table>
  <tr>
    <td>张三</td>
    <td rowspan="4"><img src="1.jpg" style="width:100px; height:100px;"></td>
  </tr>
  <tr>
    <td>李四</td>
  </tr>
  <tr>
    <td>王五</td>
  </tr>
  <tr>
    <td>赵六</td>
  </tr>
</table>
</body>
</html>
类似这样试试
js代码如下： $(document).ready(function () {
            $("td[id!='showPic']").mouseover(function () {
                var imgName = $(this).text().trim();
                $("#showPic").html("<img src='images/" + imgName + ".jpg' width='80px' height='80px'/>");
            });
        });
html代码如下：<table>
        <tr>
            <td>
                Chrysanthemum
            </td>
            <td rowspan="4" id="showPic">
                 
            </td>
        </tr>
        <tr>
            <td>
                Hydrangeas
            </td>
        </tr>
        <tr>
            <td>
                Jellyfish
            </td>
        </tr>
        <tr>
            <td>
                Koala
            </td>
        </tr>
    </table>
楼上1楼代码是可以的，2楼的说法是有道理的。我帮他俩综合一下：
因为不知道你的table完整结构，为了不影响你原有布局，借用了1楼朋友的方法，将名称用a标签装起来了，
<a …… data="这里面是图片的路径">名称</a>
<div id="pic" style="position:absolute;display:none;">图片载体</div><table id="table">
  <tr>
    <td><a href="javascript:void(0);" data="1.jpg" target="_blank">张三</a></td>
    <td rowspan="4"> </td>
  </tr>
  <tr>
    <td><a href="javascript:void(0);" data="2.jpg" target="_blank">李四</a></td>
  </tr>
  <tr>
    <td><a href="javascript:void(0);" data="3.jpg" target="_blank">王五</a></td>
  </tr>
  <tr>
    <td><a href="javascript:void(0);" data="4.jpg" target="_blank">赵六</a></td>
  </tr>
</table><script type="text/javascript">
function getMousePos(){var ev=asfman.Event();return{x:ev.cltX+document.documentElement.scrollLeft-2,y:ev.cltY+document.documentElement.scrollTop-2}}
var asfman={};
var isIE=navigator.appName=="Microsoft Internet Explorer";
var isFF=navigator.appName=="Netscape";
asfman.Event=function(){var ev;if(isIE){ev=window.event}else if(isFF){var f=this.Event.caller;while(f!=null){var e=f.arguments[0];if(e&&(e.constructor==KeyboardEvent||e.constructor==MouseEvent)){ev=e;break}f=f.caller}}if(ev){ev.srcDom=ev.srcElement||ev.target;ev.cltX=ev.clientX||ev.pageX;ev.cltY=ev.clientY||ev.pageY;return ev}return null}
window.onload=function(){
  var as=document.getElementById('table').getElementsByTagName('a');
  for(var i=0,j=as.length;i<j;i++)
       as[i].onmouseover=function(){
            var left=getMousePos().x;
            var top=getMousePos().y;
            var imgurl=this.getAttribute("data");
            var img=document.getElementById("pic");
            img.style.left=left+20+"px";
            img.style.top=top+"px";
            img.innerHTML='<img src="'+imgurl+'"  alt="'+this.innerHTML+'"/>';
            img.style.display='block';
      },
      as[i].onmouseout=function(){
        var img=document.getElementById("pic");
        img.innerHTML='';
        img.style.display='none';
      }
}
</script>
汗~~那a标签中的target要去掉的吧？修正一下
<div id="pic" style="position:absolute;display:none;">图片载体</div><table id="table">
  <tr>
    <td><a href="javascript:void(0);" data="b/1.jpg">张三</a></td>
    <td rowspan="4"> </td>
  </tr>
  <tr>
    <td><a href="javascript:void(0);" data="b/2.jpg">李四</a></td>
  </tr>
  <tr>
    <td><a href="javascript:void(0);" data="b/3.jpg">王五</a></td>
  </tr>
  <tr>
    <td><a href="javascript:void(0);" data="b/4.jpg">赵六</a></td>
  </tr>
</table>
我PS一下：1楼这位朋友，那句:alt="'+this.innerHTML+'"简直是亮点呀，写个示例写到这么细心的。。赞一个。啧啧~~