日期:2014-05-16  浏览次数:20324 次

如何实现: 鼠标指向链接,显示相应图片 ?
曾看过一个帖子:
<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>