纳金网

标题: JS图片alt提示文字，右侧“方框”的说明效果 [打印本页]

作者: 奇 时间: 2011-12-30 19:14
标题: JS图片alt提示文字，右侧“方框”的说明效果
JS实现图片的提示效果，类似于alt的提示文字，只不过这里是在图片的右侧一个“方框”中给出的说明，比较个性的东西，大家看看用在哪里比较好吧。
　　代码演示：
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>简洁实用的图片文字说明效果</title>

<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/css">

#oimg{float:left;margin:10px;}

#msg{border:solid;width:200px;height:90px;display:none;float:left;padding:10px;}

</style>

</head>

<body>

<img id="oimg" src="/uploads/common/images/wall_s6.jpg">

<div id="msg">欢迎访问烈火学院，我们的网址：Veryhuo.COM</div>

<script type="text/javascript">

var oid=document.getElementById('oimg');

var omsg=document.getElementById('msg');

var timer=null;

oid.onmousemove=showMsg;

oid.onmouseout=hideMsg;

omsg.onmouseout=hideMsg;

omsg.onmousemove=function(){clearTimeout(timer)};

function showMsg(){if(timer){clearTimeout(timer)}omsg.style.display='block';}

function hideMsg(){timer=setTimeout(function(){omsg.style.display='none';},500);}

</script>

</body>

</html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>

文章源自：烈火网，原文：http://www.veryhuo.com/a/view/43399.html

作者: 奇 时间: 2012-1-6 20:24
不错

作者: 奇 时间: 2012-3-23 23:18
我无语！

作者: tc 时间: 2012-9-10 08:30
楼主收集的可真全哦

作者: 菜刀吻电线 时间: 2012-10-9 23:19
很经典，很实用，学习了!

作者: 晃晃 时间: 2012-11-1 23:24
凡系斑竹滴话要听；凡系朋友滴帖要顶

作者: tc 时间: 2013-2-10 23:28
很经典，很实用，学习了!

作者: 奇 时间: 2013-3-16 23:21
再看一看，再顶楼主

欢迎光临纳金网 (http://course.narkii.com/club/)