如何实现: 鼠标指向链接,显示相应图片 ?
曾看过一个帖子:
<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 >
以上效果有个问题: 如果图片较大,则进入页面会显示图片,不是隐藏的!不知能否去掉 ?
我现在想修改实现指向不同链接显示图片不同,效果相同,该怎么改? 小弟试过几种方法都不行~请高手指点.
修改要求: 图片个数 和 超链接个数 是动态传入的.
[解决办法]
<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>