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

最新推荐文章于 2020-12-10 18:18:50 发布

lovelacy

最新推荐文章于 2020-12-10 18:18:50 发布

阅读量1.4k

点赞数

分类专栏： WEB编程 ajax 文章标签： javascript html div

本文链接：https://blog.csdn.net/lovelacy/article/details/1560426

版权

WEB编程同时被 2 个专栏收录

92 篇文章 0 订阅

订阅专栏

ajax

25 篇文章 1 订阅

订阅专栏

http://search3.btchina.net/btsearch.php?query=33&type=0
上面的网址，鼠标放在一个连接上，会显示影片的图片，介绍。是怎么做的呢？
---------------------------------------------------------------

<HTML>
<body>
<a href="www.sina.com" id="i" οnmοuseοver="show(this)" οnmοuseοut="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"
οnmοuseοver="show(i)" οnmοuseοut="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>

---------------------------------------------------------------

楼上的已经说了。
---------------------------------------------------------------

不过，重在理解上面的代码。用到两个，一个是DIV图层，一个是JAVASCRIPT。
还有，楼主的信誉分怎么那么少呀？