怎么实现: 鼠标指向链接,显示相应图片

如何实现: 鼠标指向链接,显示相应图片 ?
曾看过一个帖子:
<script language=javascript >
function show(obj)
{
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);
}
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 >
<div id="div1" onMouseOut="hide(this)"style="background-color:red;position:absolute; width:200px; height:100px; top:-100px;" ><img src="gg.bmp" onload="RatImg(this,600,400)"/></div >

<a href="javascript:void(0)" onmouseover=show(this) >点我 </a >
<br >
<br >
<a href="javascript:void(0)" onmouseover=show(this) >点我 </a >

以上效果有个问题: 如果图片较大,则进入页面会显示图片,不是隐藏的!不知能否去掉 ?

我现在想修改实现指向不同链接显示图片不同,效果相同,该怎么改? 小弟试过几种方法都不行~请高手指点.
修改要求: 图片个数和超链接个数是动态传入的.

------解决方案--------------------

HTML code


<script type="text/javascript">
function fun()
{
    var div = document.getElementById('showimg');
    var href = '<img src="'+arguments[0]+'"/>';
    div.innerHTML = href;
    div.style.left = window.event.x;
}
</script>

<a href="1.gif" onmouseover="fun(this.href)">img1</a>
<a href="2.gif" onmouseover="fun(this.href)">img2</a>
<div id="showimg"></div>

怎么实现: 鼠标指向链接,显示相应图片

相关推荐