最近在做一个项目，要在鼠标移到层上后显示出tip提示，网上找了半天，都很麻烦，就自己修改了一个，记录在下面

测试在IE 7、8、9及 chrome 上没问题。

<HTML> <HEAD>
<title>Tooltip</title> <STYLE type="text/css">
body{
font-size:12px;
}
.dek { Z-INDEX: 200; VISIBILITY: hidden; POSITION: absolute ; background:#CCCCCC;}
.bd{
width:100px; 
padding:5px;
}
.top{
height:20px;
width:100px;
background-color:#333333;
color:#FFFFFF;
padding:5px;
}

</STYLE>
</HEAD>
<body>
<DIV class="dek" id="dek"></DIV>

<SCRIPT>

Xoffset=-20;
Yoffset= 20;       
var nav,old,iex=(document.all),yyy=-1000;
if(navigator.appName=="Netscape"){(document.layers)?nav=true:old=true;}

if(!old)
{
var skn=(nav)?document.dek:dek.style;
if(nav)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=get_mouse;
}

function popup(msg)
{
var content="<div class='top'>内容提要</div><div width=100 class='bd'>"+msg+"</div>";
if(old){alert(msg);return;} 
else{yyy=Yoffset;
if(nav){skn.document.write(content);skn.document.close();skn.visibility="visible"}
if(iex){document.all("dek").innerHTML=content;skn.visibility="visible"}
}
}

function get_mouse(e)
{
var x=(nav)?e.pageX:event.x+document.body.scrollLeft;skn.left=x+Xoffset;
var y=(nav)?e.pageY:event.y+document.body.scrollTop;skn.top=y+yyy;
}

function kill()
{
if(!old){yyy=-1000;skn.visibility="hidden";}
}
</SCRIPT>

<span onMouseOver="popup('显示的提示信息,显示的提示信息!!!');" onmouseout="kill();">普通文字上的效果
</span>
<div>
<img src="data:image4.jpg" onMouseOver="popup('显示的提示信息,显示的提示信息!!!');" onmouseout="kill();"/>
<p>
   图片上的效果
</p>
</div>
<div onMouseOver="popup('显示的提示信息,显示的提示信息!!!');" onmouseout="kill();" class="top">
   层上的效果
</div>
</body>
</HTML>

几行简单代码实现DIV层上显示Tooltip效果的更多相关文章

  1. 如何通过Git命令行把代码提交到github上

    1.http://www.cnblogs.com/leesf456/p/5169765.html   参考博客 背景:最近入手了mac,看见mac上的大神都是在用git命令行推代码,我很羡慕有木有,好 ...

  2. jQuery+CSS 简单代码实现遮罩层( 兼容主流浏览器 )

    /* ** jQuery版本:jQuery-1.8.3.min.js ** 浏览器:Chrome( v31.0.1650.63 m ),IE11,Firefox( v32.0.1 ),IETester ...

  3. JQuery Div层滚动条控制（模拟横向滚动条在最顶端显示）

    想让DIV层滚动条显示在顶端,CSS样式没找到相关属性,于是用2个DIV层来模拟做了一个.经测试IE浏览器上显示并不太美观!不知道是否还有更好的办法可以实现这功能呢?   aaaaaaasssssss ...

  4. 输出文章段落首行空格缩进在IE和chrome显示不一致的问题

    一般的编辑文章时,首行都缩进两格,而执行的操作则是一个tab键或者四个空格键,在html代码中体现的往往都是4个 然而我在输出时却发现了同样的html代码,在IE上显示的是缩进了一个字符,在chrom ...

  5. Android中使用Notification在状态栏上显示通知

    场景 状态栏上显示通知效果 注: 博客: https://blog.csdn.net/badao_liumang_qizhi关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 新 ...

  6. 300行ABAP代码实现一个最简单的区块链原型

    不知从什么时候起,区块链在网上一下子就火了. 这里Jerry就不班门弄斧了,网上有太多的区块链介绍文章.我的这篇文章没有任何高大上的术语,就是300行ABAP代码,实现一个最简单的区块链原型. 我个人 ...

  7. 点击文字弹出一个DIV层窗口代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  8. java免费空间！最简单的openshift免费空间上传代码教程！和FTP一样简单!

    史上最简单的openshift免费空间上传代码教程!没有之一! 最近因为想弄一个免费的空间,而且最好是Java的空间,找了一大片,jsp的空间少不说,免费的更是寥寥无几. 找了一大推垃圾空间,终于让我 ...

  9. C# 客服端上传文件与服务器器端接收 （简单代码）

    简单代码: /*服务器端接收写入 可以实现断点续传*/ public string ConnectUpload(string newfilename,string filepath,byte[] fi ...

随机推荐

  1. TCP 建立连接为什么要握 3 次手？

    上次已经说过,没有协议,不成方圆,计算机之间的通信更是依赖于协议.今天就重点分析一下 TCP 协议. 传输控制协议 TCP 是一种面向连接的.可靠的.基于字节流的传输层通信协议,由IETF的RFC 7 ...

  2. hdu 2275 Kiki & Little Kiki 1 水题

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=2275 这个题比较简单,所以就没有测试样例提供给大家,基本把题目的样例过了就可以了 题目大意 给你一串操作, ...

  3. PreEssentials与MFC集成使用

    ProEssentials是Gigasoft公司开发的一个功能十分强大的分发免费的工控图表.它提供了几乎所有的曲线显示形式,支持多种开发工具,提供以下接口供开发者调用:.NET(WinForm).AS ...

  4. [UOJ#245][UER#7]天路(近似算法)

    允许5%的相对误差,意味着我们可以只输出$\log_{1.05} V$种取值并保证答案合法.并且注意到答案随着区间长度而单增,故取值不同的答案区间是$O(\log_{1.05} V)$的. 于是初始x ...

  5. [BZOJ5109]大吉大利，晚上吃鸡！

    [BZOJ5109]大吉大利,晚上吃鸡! 题目大意: 一张\(n(n\le5\times10^4)\)个点\(m(m\le5\times10^4)\)条边的无向图,节点编号为\(1\)到\(n\),边 ...

  6. MyBatis -- generator 逆向工程

    一.引言 官网文档:http://www.mybatis.org/generator/index.html 通过使用官方提供的mapper自动生成工具,mybatis-generator-core-1 ...

  7. wxwidget wxpython 可视化开发工具

    wxwidget官方建议的工具集合:http://wiki.wxwidgets.org/Tools 支持wxpython可视化开发工具 wxFormBuilder wxGlade wxDesigner ...

  8. Codeforces Round #259 (Div. 1) A. Little Pony and Expected Maximum 数学公式结论找规律水题

    A. Little Pony and Expected Maximum Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://codeforces.c ...

  9. Codeforces Round #295 (Div. 2)B - Two Buttons BFS

    B. Two Buttons time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...

  10. 轨至轨运算放大器 rail to rail

    http://www.360doc.com/content/10/1102/16/2285160_66006645.shtml Rail to rail: 轨至轨,指器件的输入输出电压范围可以达到电源 ...