求:将鼠标放在文字上,即在鼠标旁边显示相应的图片的效果代码

有两张图片1.gif,2.gif<table>
<tr><td><a title="好伟大的建筑。">中国长城</a></td></tr>
<tr><td><a title="">法国铁塔</a></td></tr>
</table>
我想实现的效果是：将鼠标放在文字上,即在鼠标旁边显示相应的图片.就类似tittle=""那样显示说明一样的效果.鼠标放开后，图片不显示。该如何实现呢？可惜的是title只能显示文字，而不能显示图片，那样的话，如果写onmouseover和onmouseout事件和DIV结合,可以实现这样的效果吗?该如果写呢?可以给我实例代码吗?

解决方案 »

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

可以。先定义一个隐藏的DIV:<div id='MyDiv' style='display:none'><img src=''/></div>
然后鼠标移动到文件[中国长城]时就出发[中国长城]这个<a>标签的onmouseover=Show()事件function Show()
{
  给div中的img标签的src赋值；
  显示div
}移开时就触发
onmouseout=Hide()function Hide()
{
  隐藏div
}
不过要控制好div的显示位置，一般根据鼠标当前的位置来计算
1楼的,那样,图片每次都会显示在鼠标的旁边吗?要用这个position:absolute;吗?能帮我写完整代码吗?
现在关键是div的显示位置如何确定呀?
现在关键是div的显示位置如何确定呀?我要实现在鼠标所放的文字的右边显示.
event.clientX 获取鼠标 x坐标，
event.clientY 获取鼠标 y坐标，
这个是我要的.可以学习参考的.<head>
<script language=javascript >
function show(obj,imgobj)
{
var str=getIE(obj)
var temp=str.split(",")
var top=temp[0]
var left=temp[1]
var objDiv=document.getElementById("div1")
objDiv.style.display="";
objDiv.style.left=temp[1];
objDiv.style.top=parseInt(temp[0])+parseInt(obj.offsetHeight);
imgname.src=imgobj;
}
function getIE(e)
{
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent)
{
t+=e.offsetTop;
l+=e.offsetLeft;
}
return (t+","+l);
}
function hide(obj)
{
obj.style.display="none";
}
</script>
</head><body> <div id="div1" style="display:none; background-color:#eee; position:absolute; width:50px; height:50px; top:-50px;" >

<img id=imgname src="" border="0"/>
</div >
      
<a href="javascript:void(0)" onmouseover="show(this,'2.JPG')"  onMouseOut="hide(div1)">点我3 </a >
<br >
<br >
<br >
<br >
          
<a href="javascript:void(0)" onmouseover="show(this,'9.gif')"  onMouseOut="hide(div1)">点我4 </a > </body>
<head>
<script language=javascript >
function getIE(e)
{
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent)
{
t+=e.offsetTop;
l+=e.offsetLeft;
}
return (t+","+l);
}
function show(obj,showdiv,imgpath)
{
var str=getIE(obj)
var temp=str.split(",")
var top=temp[0]
var left=temp[1]
showdiv.style.display="";
showdiv.style.left=temp[1];
showdiv.style.top=parseInt(temp[0])+parseInt(obj.offsetHeight);
imgname.src=imgpath;
}
function hide(obj)
{
obj.style.display="none";
}
</script>
</head><body> <div id="div1" style="display:none; background-color:#eee; position:absolute; width:50px; height:50px; top:-50px;" >
<img id=imgname src="" border="0"/>
</div >
      
<a href="javascript:void(0)" onmouseover="show(this,div1,'2.JPG')"  onMouseOut="hide(div1)">点我3 </a >
<br >
<br >
          
<a href="javascript:void(0)" onmouseover="show(this,div1,'9.gif')"  onMouseOut="hide(div1)">点我4 </a > </body>
<head>
<script language=javascript >
function getIE(e)
{
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent)
{
t+=e.offsetTop;
l+=e.offsetLeft;
}
return (t+","+l);
}
function show(obj,showdiv,imgpath)
{
var str=getIE(obj)
var temp=str.split(",")
var top=temp[0]
var left=temp[1]
showdiv.style.display="";
showdiv.style.left=temp[1];
showdiv.style.top=parseInt(temp[0])+parseInt(obj.offsetHeight);
imgname.src=imgpath;
}
function hide(obj)
{
obj.style.display="none";
}
</script>
</head><body> <div id="div1" style="display:none; background-color:#eee; position:absolute; width:50px; height:50px; top:-50px;" >
<img id=imgname src="" border="0"/>
</div >
      
<a href="javascript:void(0)" onmouseover="show(this,div1,'2.JPG')"  onMouseOut="hide(div1)">点我3 </a >
<br >
<br >
          
<a href="javascript:void(0)" onmouseover="show(this,div1,'9.gif')"  onMouseOut="hide(div1)">点我4 </a > </body>