最近在做一个项目，要在鼠标移到层上后显示出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. Python网络编程之socket应用

    1 引言 本篇主要对Python下网络编程中用到的socket模块进行初步总结.首先从网络基础理论出发,介绍了TCP协议和UDP协议:然后总结了socket中的常用函数:最后通过实际代码展示基本函数的 ...

  2. SERVLET API中forward()与redirect()的区别？

    前者仅是容器中控制权的转向,在客户端浏览器地址栏中不会显示出转向后的地址:后者则是完全的跳转,浏览器将会得到跳转的地址,并重新发送请求链接.这样,从浏览器的地址栏中可以看到跳转后的链接地址.所以,前者 ...

  3. Swift2.0语言教程之下标脚本

    Swift2.0语言教程之下标脚本 下标脚本 下标脚本是访问对象.集合或者序列的快速方式.开发者不需要调用实例特定的赋值和访问方法,就可以直接访问所需要的数值.例如在数组中,可以直接使用下标去访问或者 ...

  4. ubuntu16.04查看软件的安装位置

    以chromium-browser为例 find命令 totoro@SWH:~$ sudo find / -name chromium-browser /usr/lib/chromium-browse ...

  5. 【BZOJ 3036】 3036: 绿豆蛙的归宿 （概率DP）

    3036: 绿豆蛙的归宿 Time Limit: 2 Sec  Memory Limit: 128 MBSubmit: 491  Solved: 354 Description 随着新版百度空间的下线 ...

  6. Java设计模式GOF之6大设计原则

    Java设计模式GOF之6大设计原则原则 1.开闭原则(Open Close Principle) 一个软件实体如类.模块和函数应该对扩展开放,对修改关闭. 开闭原则是面向对象的可复用设计的第一块基石 ...

  7. jProfiler远程连接Linux监控jvm1运行状态

    第一步:下载软件官网地址:https://www.ej-technologies.com/download/jprofiler/files,下载一个linux服务端,一个windows客户端 GUI界 ...

  8. flash 跨域加载 二次加载

    var url2:String = "http://thirdapp0.qlogo.cn/qzopenapp/fa5d80ebf9fc89aaa1d7ddb0e1b861e58d77b409 ...

  9. js的栈与堆

    JavaScript中基本数据类型和引用数据类型的区别  这是我引用别人的  觉得很好   1.基本数据类型和引用数据类型 ECMAScript包括两个不同类型的值:基本数据类型和引用数据类型. 基本 ...

  10. 平时常用的Visual Studio操作技巧，持续更新中……

    移除未使用的命名空间--方法1:右键--"组织using"--"移除未使用的using"--方法2:Shift+F10--"O"-" ...