(源码实例)通过层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>  

java图片文字识别技术

代码参考:http://blog.csdn.net/ycb1689/article/details/8520954 其实我觉得识别率不是很高,至少没有达到95%,而且图片稍微做点模糊处理就识别不了了,...

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

(源码实例)通过层DIV实现,当鼠标放在链接上面,显示图片及文字 层的位置是可改变、大小是可改变的、可见是可调的,这个就可以用于实现一些特殊的效果,如隐显、渐显等, 下面是一个鼠标事件的层操作,当...

当鼠标移动到div或者超链接只上时,显示相应的鼠标形状

在HTML中很多情况都会要求我们当鼠标移动上去的时候显示相应的形状出来,要么是手型或者箭头这种之类的。 下面我就以超链接为例子,给大家介绍一下怎么实现这一过程。 其实特别简单只要给组件添加相应的样...

鼠标移动显示 div 图片 文字效果

鼠标移动变换栏目内容特效 .showbox{ clear:both; width:500px;/*此处控制显示区域的高度*/ border:1px solid #ff0000;/*此处...

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

/*弹出div显示客户信息 Create CopyRight:jinpeilong 2012*/     function createXhR()    {     var xhr;    ...

当鼠标经过显示图片信息

使用Ajax写当鼠标经过显示图片信息 ImageBean package domain; public class Image { private int id; private Strin...
  • boxyuan
  • boxyuan
  • 2017年05月30日 17:06
  • 199

DIV CSS鼠标经过悬停在图片上时图片上方显示文字

纯div+css实现第一张图片没有文字内容,鼠标悬停时出现第二张图那样效果 使用div css实现鼠标悬停图片上方时显示文字内容原理: 首先我们设置一个盒子对象,并且将图片使用style标签内...

DIV CSS鼠标经过悬停在图片上时图片上方显示文字

DIV CSS鼠标悬停在没有文字内容图片上时图片上方显示文字,完全是纯css div实现。CSS实现鼠标悬停放图片上方时显示美化内容。 原始图片显示没有文字在上方,当鼠标经过悬停时显示文字并且文字背...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:(源码实例)通过层DIV实现,当鼠标放在链接上面,显示图片及文字
举报原因:
原因补充:

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