鼠标放在一个连接上,会显示图片(类似tooltip)

来源:互联网 发布:php专家系统 编辑:程序博客网 时间:2024/04/30 10:32

鼠标放在一个连接上,会显示图片(类似tooltip)

Posted on 2007-02-08 14:08 余墨 阅读(5) 评论(0)  编辑 收藏 引用 网摘 所属分类: Javascript
<HTML>
<body>
<a href="www.sina.com" id="i" onmouseover="show(this)" onmouseout="hide()">免费电影</a>
<div id="m" style="BORDER-RIGHT:black 1px solid;PADDING-RIGHT:20px;BORDER-TOP:black 1px solid;PADDING-LEFT:20px;Z-INDEX:100;VISIBILITY:hidden;PADDING-BOTTOM:20px;BORDER-LEFT:black 1px solid;WIDTH:80px;PADDING-TOP:20px;BORDER-BOTTOM:black 1px solid;POSITION:absolute"
onmouseover="show(i)" onmouseout="hide()">
<img src="meng.jpg"></img>
</div>
<script>  
function  show(o){  
var  m=document.getElementById("m")  
m.style.pixelLeft=getL(o)  
m.style.pixelTop=getT(o)+o.offsetHeight  
m.style.visibility=''  
}  
 
function  hide(){  
document.getElementById("m").style.visibility='hidden'  
}  
 
function  getL(e){  
var  l=e.offsetLeft;  
while(e=e.offsetParent){  
l+=e.offsetLeft;  
}  
return  l  
}  
 
function  getT(e){  
var  t=e.offsetTop;  
while(e=e.offsetParent){  
t+=e.offsetTop;  
}  
return  t  
}  
</script>
</body>
</HTML>
  
原创粉丝点击