(源码实例)通过层DIV实现,当鼠标放在链接上面,显示图片及文字

原创 2007年09月21日 11:23:00

(源码实例)通过层DIV实现,当鼠标放在链接上面,显示图片及文字
层的位置是可改变、大小是可改变的、可见是可调的,这个就可以用于实现一些特殊的效果,如隐显、渐显等,
下面是一个鼠标事件的层操作,当鼠标放在上面的时候可以显示定位显示隐藏的层:
<HTML>
<body>
示例展示一:
<a href="www.sina.com" id="i" onmouseover="show(this,'m')" onmouseout="hide('m')">鼠标放在上面显示图片查看有边框的层</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,'m')" onmouseout="hide('m')">
<nobr>注:这个层是加了边框的</nobr><br>
<img src="http://images.163.com/homepage/logo.gif"></img><br>
<a href="http://blog.csdn.net/fenglibing"><nobr>我的CSDN博客</nobr></a><br>
<a href="http://www.163.com">网易</a>
</div>

示例展示二:
<a href="www.sina.com" id="i1" onmouseover="show(this,'m1')" onmouseout="hide('m1')">鼠标放在上面显示图片查看没有边框的层</a>
<div id="m1" style="VISIBILITY:hidden;POSITION:absolute;background-image:url(http://p.blog.csdn.net/images/p_blog_csdn_net/xport/155656/o_Java.gif);" onmouseover="show(i1,'m1')" onmouseout="hide('m1')">
注:这个层没有边框但加了背景,写法就简单一点<br>
<img src="http://images.163.com/homepage/logo.gif"></img><br>
<a href="http://blog.csdn.net/fenglibing"><nobr>我的CSDN博客</nobr></a><br>
<a href="http://www.163.com"><nobr>网易</nobr></a>
</div>

<script>
//显示
function show(o,obj){
  var m=document.getElementById(obj);
  m.style.pixelLeft=getL(o);
  m.style.pixelTop=getT(o)+o.offsetHeight;
  m.style.visibility='';
}
//隐藏
function hide(obj){
  document.getElementById(obj).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实现,当鼠标放在链接上面,显示图片及文字 - 流星絮语 JAVA学习笔记 - CSDNBlog

示例展示一: 鼠标放在上面显示图片查看有边框的层 注:这个层是加了边框的 我的CSDN博客 网易 示例展示二: 鼠标放在上面显示图片查看没有边框的层 注:这个层没有边框但加了背景,写法就...
  • daryl715
  • daryl715
  • 2007年11月20日 11:46
  • 953

Js无刷新添加新层,拖动DIV层可互换位置的JavaScript实现

无刷新添加一个新的DIV层,并可实现的该层的拖动,鼠标拖动层可移动位置,将JS部分另存为一个新文件,用到的时候从外部引入,这个拖动层代码很流行,GG和YAHOO等大网站经常可以看到这种效果...
  • life66881
  • life66881
  • 2015年04月04日 18:09
  • 497

鼠标移动到某文字上然后显示图片

function showImg(imgid){ document.getElementById(imgid).style.display = "block"; }  function hideIm...
  • u012027874
  • u012027874
  • 2016年12月22日 11:16
  • 1017

鼠标放上图片,图片上方出现遮罩和文字效果

* { margin: 0px; padding: 0px; }
  • xyc_csdn
  • xyc_csdn
  • 2017年04月08日 15:01
  • 478

自定义RadioButton 文字在下,图片在上 .

  • zhanzkw
  • zhanzkw
  • 2014年03月21日 17:41
  • 896

Div弹出层-当鼠标移上去出现一个层,鼠标移开这个层消失的特效,大家可以直接拿去用

/*弹出div显示客户信息 Create CopyRight:jinpeilong 2012*/     function createXhR()    {     var xhr;    ...
  • Long_carol
  • Long_carol
  • 2011年11月19日 11:27
  • 14509

gridview显示上方图片下方文字

item.xml
  • u010002184
  • u010002184
  • 2016年11月02日 00:32
  • 390

Div 浮动到另一个div之上:

Div 浮动到另一个div之上: 绝对定位相对定位 .fj1 { position: absolute; ...
  • WDYDXF
  • WDYDXF
  • 2013年03月04日 16:36
  • 34980

jquery 弹出浮层(div) + 遮蔽层 方法一

http://www.w3.org/1999/xhtml" >     test                 .pop-box {                z-inde...
  • orichisonic
  • orichisonic
  • 2015年12月16日 12:55
  • 2234

CSS让div层悬浮在最上方

效果如下: 这里是使得一张div里面的图片悬浮在了地图的上方,css代码如下 .tl { width: 240px; height: 193px; position: absolut...
  • zxj19951029
  • zxj19951029
  • 2015年06月24日 11:07
  • 16503
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:(源码实例)通过层DIV实现,当鼠标放在链接上面,显示图片及文字
举报原因:
原因补充:

(最多只允许输入30个字)