您的位置：首页 > 编程语言

鼠标放到文字上弹出一幅图片的代码

2015-12-02 12:02 375 查看

<html>
<body>
<style type="text/css">
<!--
.thumbnail{position:relative;z-index:0;}
.thumbnail:hover{background-color:transparent;z-index:50;}
.thumbnail span{position:absolute;background-color:#FFFFE0;left:-1000px;border:1px dashed gray;visibility:hidden;color:#000;text-decoration:none;padding:5px;}
.thumbnail span img{border-width:0;padding:2px;}
.thumbnail:hover span{visibility:visible;top:10px;left:280px;}
p{margin-top:200px}
-->
</style>
<a class="thumbnail" href="#">
文字<br>
<span><img src="  ">
</span></a>
</body>
</html>

<script>
function senfe(){
var l=event.clientX + document.body.scrollLeft;
var t=event.clientY + document.body.scrollTop;
document.getElementById("kkk").style.left=l + "px";
document.getElementById("kkk").style.top=t + "px";
document.getElementById("kkk").style.display="block";
}
function none(){
document.getElementById("kkk").style.display="none";
}
</script>
<a href="javascript:;" onmouseover="senfe()" onmouseout="none()">查看</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<img src="http://gg.blueidea.com/2006/chinaok/208x32.gif" alt="" id="kkk" name="kkk" style="display: none;position: absolute;" />

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航