html风格tooltip效果的实现
来源:asp之家 发布时间:2010-04-08 13:00:00
网页上的图片如果设置了alt属性,当鼠标移经时就会有tooltip出现,但是只能显示一行文本,有时需要多行文本,乃至图片来显示图片、链接或者其它HTML元素的提示信息时,alt属性就无能为力了。
在本文提供了一种实现方案:为图片、链接等任意需要tooltip的HTML元素加上一个自定义的属性——"tooltip",tooltip的值即为要显示的提示信息,可以是任意HTML代码。tooltip属性可在HTML代码中元素定义的标签中添加,比如<img src="yourpic.jpg" tooltip="It's a multiline tooltip!<br>And you can use pictures too!" ></img>,然后用下面讲述的 一段脚本,我已写成tooltip.js,实现对鼠标事件的捕获,即可实现HTML风格的tooltip。
tooltip的实现思想为获取需要显示TOOLTIP的元素的绝对位置,然后用一个DIV在鼠标位置显示其tooltip属性的值。以下是tooltip.js的代码和注释:
//为HTML容器增加TOOLTIP支持,参数e为你要添加的TOOLTIP支持的容器,如为document.body则为整个页面
//添加支持,如为某DIV则仅为该DIV中带有TOOLTIP属性的元素提供支持。
function addTipSupport(e) {
e.onmouseover = showTip;
e.onmouseout = hideTip;
e.onmousemove = showTip;
}
//获得控件的绝对位置,返回左上角坐标
function getElePos(e){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
return [l, t];
}
//显示TOOLTIP
function showTip() {
getElePos(event.srcElement);
if(event.srcElement.tooltip && event.srcElement.tooltip!='') {
altlayer.style.visibility='visible';
var cord = getElePos(event.srcElement);
altlayer.style.left=cord[0]+event.offsetX + 20;
altlayer.style.top=cord[1]+event.offsetY+25;
altlayer.innerHTML=event.srcElement.tooltip;
altlayer.style.zIndex = event.srcElement.style.zIndex + 1;
}
//else altlayer.style.visibility='hidden';
}
//隐藏TOOLTIP
function hideTip() {
altlayer.style.visibility = 'hidden';
}
本TOOLTIP的用法很简单,
(1)在</body>标签前加入以下代码:
<div style="visibility:hidden;border:2px groove orange;padding:5px;font-size:12px;background-color:#FFFFCC;position:absolute;" id=altlayer></div> //定义显示TOOLTIP的DIV风格
<script type="text/javascript" src="tooltip.js"></script> //引入tooltip.js
上面的DIV的ID一定要与tooltip.js中的ID相对应,此处为altlayer ,style可以设置成自己的风格,因而可使TOOLTIP带有自定义的风格。
(2)为需要支持TOOLTIP的容器元素增加TOOLTIP支持,以实现对鼠标事件的捕获,则该容器内所有带有TOOLTIP属性的元素均可有TOOLTIP风格。可在任意时候包括页面已经装载后增加支持,用以下一句即可:
<script type="text/javascript">
<!--
addTipSupport(document.body); //此处的参数可换成其它,以局限在某容器内支持TOOLTIP风格。
//-->
</script>
(3)为需要tooltip的HTML元素加上一个自定义的属性——"tooltip",tooltip的值即为要显示的提示信息,可以是任意HTML代码。tooltip属性可在HTML代码中元素定义的标签中添加,比如
<img src="yourpic.jpg" tooltip="It's a multiline tooltip!<br>And you can use pictures too!<br><img src='sompic.jpg'/>" ></img>。
此TOOLTIP的优点在于可以设定只在相关的容器范围内支持TOOLTIP,以减少不必要的开销;用来显示TIP的DIV风格可以自己任意设定,TOOLTIP属性值可为任意HTML代码,因而风格是完全可定制的;代码易改动,可进一步改动为不同地方实现不同风格的TOOLTIP。
猜你喜欢
- 昨天我问过这个问题怎么用ADODB.Stream来读取或写入文件,而不是用fso,不过没人回答到点上,今天搞定了.贴出来给觉得有用的朋友,希
- 现在越来越多的浏览器有拦截弹出窗口的功能。广告弹出来给拦掉了就无所谓,要是客户在付款时给拦掉了可就不能乱算了。Gmail的“哎呀”算是经典,
- 具体代码和说明如下:upload.asp<form action=http://<%= Request.&n
- 类:在HTML中当表现class属性的时候,人们可以用点(.)号来作为~=号的一个替代选择,所以div.value等同于div[class~
- 前两天看见有人问静态网页加密问题,就写了这个代码稍微有些长,解释一下思路:加密时:先把用户的密钥A用md5加密为B,然后用B异或源文件S0得
- 问:如何让内联框架里面的网页背景透明?(用iframe嵌套一网页,怎么能够设置其背景为透明以便能显示父框架中网页的背景图?)答:这是需要 I
- 如何在网页打开时显示“正在加载”之类的信息?代码及说明见下: <% Response.Buffer =
- 一、密码式给数据库起一个随机复杂的名称,避免被猜到被下载,这种方式在以前很流行,因为大家都对自己的代码很有自信。但随着错误提示对数据库地址的
- 在CentOS上安装MySQL数据库服务器后,系统出于安全性考虑,缺省不支持用户通过非本机连接上数据库服务器,如果想让用户通过另外一台机器连
- 大家都遇到过验证码,随着灌水机的发展,验证码也是日新月异,验证码开始分了繁体简体,带着字母、符号,甚至开始了中文验证码,看到这样的验证码,估
- 一、为表创建自增长自段有两种,一种是不同的表使用各自的Sequence,方法如下: 1、在Oracle sequence首先创建sequen
- 要真说出来哪一个函数能够做得到,还真难。但我们可用下面的代码来进行识别,返回“假”即偶数,返回“真”则奇数: function&n
- 语法: ROW_NUMBER() OVER([ <partition_by_clause>] <order_by_clau
- 各种asp字符串处理函数,包括:把字符串换为char型数组,把一个数组转换成一个字符串,检查源字符串str是否以chars开头,检查源字符串
- 秦歌这篇文章总结得很不错,俺挑刺来啦:1. 优先级的描述不严谨,有 !important 时,网页样式可以覆盖用户自定义样式。用户!impo
- 常见的双倍边距类问题都遇到过,但很少遇到这种有意思的,所以记录一下。这个BUG是发生在Standards模式下(就是包含XHTML或者HTM
- 在IE下测试,发现最大值是:18014398509481984(0x40000000000000)另外发现一个奇怪的问题:JS世界居然不存在
- 这世上“没有丑女人,只有懒女人”这是女人美丽圣经里的最精彩的一句话了,一个女人只要舍得花时间琢磨怎么保养,怎么打扮,总能够找到方法展现自己美
- SQL中的单记录函数 1.ASCII 返回与指定的字符对应的十进制数; SQL> select ascii('A')
- 如何制作一个股票滚屏显示面板?<html> <head> <script