最近在做一个项目，要在鼠标移到层上后显示出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. android handler messageQueue，looper

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 处理器获取 当前线程中的 循环器对象, 循环器 从 消息队列中 取出 消息, 给 处理器 ...

  2. QT学习笔记7：C++函数默认参数

    C++中允许为函数提供默认参数,又名缺省参数. 使用默认参数时的注意事项: ① 有函数声明(原型)时,默认参数可以放在函数声明或者定义中,但只能放在二者之一.建议放在函数声明中. double sqr ...

  3. [Agc002E]Candy Piles

    [Agc002E]Candy Piles 题目大意 有\(n\)个数,两人轮流操作,可以做以下操作之一: 删掉一个最大的数 将所有数-1 最后取没的人输,问先手是否必胜? 试题分析 直接决策不知道选哪 ...

  4. PHP渗透中的奇淫技巧--检查相等时的漏洞

    PHP是现在网站中最为常用的后端语言之一,是一种类型系统 动态.弱类型的面向对象式编程语言.可以嵌入HTML文本中,是目前最流行的web后端语言之一,并且可以和Web Server 如apache和n ...

  5. 【对比分析六】JavaScript中GET和POST的区别及使用场景

    区别: GET:一般用于信息获取,使用URL传递参数,对所发送信息的数量也有限制,一般在2000个字符 POST:一般用于修改服务器上的资源,对所发送的信息没有限制 GET方式需要使用 Request ...

  6. maven -- 问题解决（一）解决eclipse中maven项目配置过程和maven install时出现的问题

    问题一: 配置项目时出现的错误: error: Cannot change version of project facet Dynamic Web Module to 2.5. error: One ...

  7. Qt 4.7.2移植到ARM教程

    Qt的移植包括步骤如下: 1.下载并安装VMware WorkStation 12(最好比较高级的版本,早期的版本共享目录在虚拟机里可能显 示不了). 2.下载ubuntu 14.0.4(最好是lts ...

  8. Ubntu 14.04 下 开源骨架跟踪-skeltrack

    Skeltrack是个不错的开源骨架跟踪软件.跟踪起来还相对的稳定速度还不错.能满足基本的体感功能.下面来介绍下怎么安装.  1.运行环境配置 #need clutter 1.8 or greater ...

  9. 力特ZE398C驱动光盘-USB转RS232-支持Windows 10/Mac

    这个工具是USB1.1的,相对来说比较老,一开始做小白鼠不知道买了USB1.1的,所以我不建议买这个,还有其它的型号,支持USB2.0和USB3.0,不过价格也相对来说比较贵,这个才30块钱左右. 关 ...

  10. 特殊字符\u2028导致的Javascript脚本异常

    这原本是个小错误,但排查花了不少时间,因此写下来和大家分享一下. 起因 通过Ajax动态从后台读取文章内容,并显示在页面上,加载到某篇文章的时候,报javascript语法错误,无法显示文章内容. A ...