求一段代码：鼠标放在小图片上显示大图片？？

<SCRIPT LANGUAGE="JavaScript">
function show(obj)
{
var img = document.getElementById("showimg")
img.src=obj.src;
img.style.display="";
}
function hide()
{
document.getElementById("showimg").style.display="none";
}</SCRIPT>
<img src="1.jpg" onmouseover="show(this)" onmouseout="hide()" width=50 height=50><BR>
<img src="2.jpg" onmouseover="show(this)" onmouseout="hide()" width=50 height=50><BR>
<img src="3.jpg" onmouseover="show(this)" onmouseout="hide()" width=50 height=50><BR>
<img src="4.jpg" onmouseover="show(this)" onmouseout="hide()" width=50 height=50><BR>
<img src="" id="showimg" style="display:none">

解决方案 »

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

这个好点<SCRIPT LANGUAGE="JavaScript">
function show(e,obj)
{
e = e||window.event
var img = document.getElementById("showimg")
img.src=obj.src;
img.style.display="";
img.style.position="absolute";
img.style.top = e.clientY;
img.style.left = e.clientX;
}
function hide()
{
document.getElementById("showimg").style.display="none";
}
</SCRIPT>
<img src="1.jpg" onmousemove="show(event,this)" onmouseout="hide()" width=50 height=50><BR>
<img src="2.jpg" onmousemove="show(event,this)" onmouseout="hide()" width=50 height=50><BR>
<img src="3.jpg" onmousemove="show(event,this)" onmouseout="hide()" width=50 height=50><BR>
<img src="4.jpg" onmousemove="show(event,this)" onmouseout="hide()" width=50 height=50><BR>
<img src="" id="showimg" style="display:none" width=100 height=100>
function show(e,obj)
{
e = e||window.event
var img = document.getElementById("showimg")
if(img.src!=obj.src)
img.src=obj.src;
img.style.display="";
img.style.position="absolute";
img.style.top = e.clientY;
img.style.left = e.clientX;
}
function hide()
{
document.getElementById("showimg").style.display="none";
}把之前的方法换一换忘记判断汗
to：neo_yoho
你的代码能显示，就是有一个问题：定位总是在一个地方显示。我把浏览器拉到底部看图片的时候，鼠标放上去显示的大图仍然显示在上面，这样就看不到了。
如果修改一下，在每个小图的旁边显示，就好了。谢谢。
<SCRIPT LANGUAGE="JavaScript">
function show(obj)
{
var img = document.getElementById("showimg");
if(img.src!=obj.src)
{
img.src=obj.src;
}
img.style.display="";
img.style.position="absolute";
img.style.top = obj.offsetTop;
img.style.left = obj.offsetLeft+obj.width;
}
function hide()
{
document.getElementById("showimg").style.display="none";
}
</SCRIPT><img src="1.jpg" onmouseover="show(this)" onmouseout="hide()" width=50 height=50><BR>
<img src="2.jpg" onmouseover="show(this)" onmouseout="hide()" width=50 height=50><BR>
<img src="3.jpg" onmouseover="show(this)" onmouseout="hide()" width=50 height=50><BR>
<img src="4.jpg" onmouseover="show(this)" onmouseout="hide()" width=50 height=50><BR>
<img src="" id="showimg" style="display:none" height=200>
neo_yoho非常热心，修改了好几次。多谢。
代码如果头部加上
<!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">在firefox下就会显示不正常，如果不加，就会正常显示。在IE下是加与不加都能正常显示。
<!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>
<title>gfergre</title>
<LINK href="/favicon.ico" rel="shortcut icon">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link href="/skins/eng.css" rel="stylesheet" type="text/css" /><SCRIPT LANGUAGE="JavaScript">
function getAbsolutePosition(obj)
{
position = new Object();
position.x = 0;
position.y = 0;
var tempobj = obj;
while(tempobj!=null && tempobj!=document.body)
{
if(window.navigator.userAgent.indexOf("MSIE")!=-1)
{
position.x += tempobj.offsetLeft;
position.y += tempobj.offsetTop;
}
else if(window.navigator.userAgent.indexOf("Firefox")!=-1)
{
position.x += tempobj.offsetLeft;
position.y += tempobj.offsetTop;
}
tempobj = tempobj.offsetParent
}
return position;
}
function show(obj)
{
var img = document.getElementById("showimg");
var pos=getAbsolutePosition(obj);
if(img.src!=obj.src)
{
img.src=obj.src;
}
img.style.display="";
img.style.position="absolute";
img.style.top = pos.y;
img.style.left = pos.x+obj.width;
}
function hide()
{
document.getElementById("showimg").style.display="none";
}
</SCRIPT>
</head>
<body>
<table border="1" style="border-collapse:collapse; line-height:22px;" cellpadding="5" cellspacing="0" align="center" width="778"><tr>
<td width="106" align="center">
<div class="ebookimg"><img src="http://www.51zhileng.com/ebook/images/ebook36/2008618162357-7BwZzI.jpg" onmouseover="show(this)" onmouseout="hide()" width="90" height="120" border="0" /><br />
</div></td>
<td style="word-break:break-all;" height="100"></td>
</tr>
<tr>
<td height="15" colspan="3" align="center"><hr align="center" width="100%" size="1" noshade="noshade" color="#E4E4E4" /></td>
</tr><tr>
<td width="106" align="center">
<div class="ebookimg"><img src="http://www.51zhileng.com/ebook/images/ebook35/2008618143557-efEsCl.jpg" onmouseover="show(this)" onmouseout="hide()" width="90" height="120" border="0" />
</div></td>
<td style="word-break:break-all;" height="100"></td>
</tr>
<tr>
<td height="15" colspan="3" align="center"><hr align="center" width="100%" size="1" noshade="noshade" color="#E4E4E4" /></td>
</tr><tr>
<td width="106" align="center">
<div class="ebookimg"><img src="http://www.51zhileng.com/ebook/images/ebook34/2008618142544-3sT1Wi.jpg" onmouseover="show(this)" onmouseout="hide()" width="90" height="120" border="0" />
</div></td>
<td style="word-break:break-all;" height="100"></td>
</tr>
<tr>
<td height="15" colspan="3" align="center"><hr align="center" width="100%" size="1" noshade="noshade" color="#E4E4E4" /></td>
</tr><tr>
<td width="106" align="center">
<div class="ebookimg"><img src="http://www.51zhileng.com/ebook/images/ebook33/2008618141113-6kg6hz.jpg" onmouseover="show(this)" onmouseout="hide()" width="90" height="120" border="0" />
</div></td>
<td style="word-break:break-all;" height="100"></td>
</tr>
<tr>
<td height="15" colspan="3" align="center"><hr align="center" width="100%" size="1" noshade="noshade" color="#E4E4E4" /></td>
</tr><tr>
<td width="106" align="center">
<div class="ebookimg"><img src="http://www.51zhileng.com/ebook/images/ebook32/2008618135355-SOlaaJ.jpg" onmouseover="show(this)" onmouseout="hide()" width="90" height="120" border="0" />
</div></td>
<td style="word-break:break-all;" height="100"></td>
</tr>
<tr>
<td height="15" colspan="3" align="center"><hr align="center" width="100%" size="1" noshade="noshade" color="#E4E4E4" /></td>
</tr></table><img src="" id="showimg" style="display:none" width="270" height="360" />