怎么实现用鼠标指到一个图片就会在图片的旁边出现另外一个图片

Question

<img id=demo style="position:absolute;display:none">
<script>
function show(){
demo.style.pixelLeft=event.clientX
demo.style.pixelTop=event.clientY
demo.style.display="";
}
function hid(){
demo.style.pixelLeft=0
demo.style.pixelTop=0
demo.style.display="none";
}
</script>
<img onmouseover=show() onmouseout=hid()>
<img onmouseover=show() onmouseout=hid()>
<img onmouseover=show() onmouseout=hid()>

Answer 1

<img id=demo style="position:absolute;display:none">
<script>
function show(){
demo.style.pixelLeft=event.clientX
demo.style.pixelTop=event.clientY
demo.style.display="";
}
function hid(){
demo.style.pixelLeft=0
demo.style.pixelTop=0
demo.style.display="none";
}
</script>
<img onmouseover=show() onmouseout=hid()>
<img onmouseover=show() onmouseout=hid()>
<img onmouseover=show() onmouseout=hid()>

Answer 2

<img src="http://www.csdn.net/images/ad/vsnet_120.gif" onmouseover="a(this.src);document.all.m.style.visibility='visible'" onmouseout="document.all.m.style.visibility='hidden'"  onmousemove="document.all.m.style.top=event.clientY;document.all.m.style.left=event.clientX;">
<img src="http://expert.csdn.net/images/csdn.gif" onmouseover="a(this.src);document.all.m.style.visibility='visible'" onmouseout="document.all.m.style.visibility='hidden'"  onmousemove="document.all.m.style.top=event.clientY;document.all.m.style.left=event.clientX;">
<script>
function a(o)
{
document.all.g.src=o
}
</script>
<div id=m style="position:absolute;top:0;left:0;visibility:hidden"><img id=g src=""></div>

Answer 3

<img id=tips style="position:absolute;left:300;display:none" src=http://expert.csdn.net/images/csdn.gif>
<img onmouseout="document.all.tips.style.display='none'" onmousemove="with(document.all.tips) {style.left=event.clientX;style.top=event.clientY;style.display='block'}" src=http://expert.csdn.net/images/csdn.gif>