<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simple Tooltip</title>
<style>
.Text{
font-family: Verdana, Arial, Sans-serif, 'Times New Roman';
font-size: 8pt;
font-weight: normal;
font-style: normal;
color: #333333;
text-decoration: none;
}
.toolTip {
font-family: Verdana, Arial, Sans-serif, 'Times New Roman';
font-size: 8pt;
filter:alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
/* comment the above 3 line if you don't want transparency*/
}
</style>
<script language="javascript" defer="false">
//browser detection
var agt=navigator.userAgent.toLowerCase();
var is_major = parseInt(navigator.appVersion);
var is_minor = parseFloat(navigator.appVersion);
var is_nav = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1)
&& (agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1)
&& (agt.indexOf('webtv')==-1) && (agt.indexOf('hotjava')==-1));
var is_nav4 = (is_nav && (is_major == 4));
var is_nav6 = (is_nav && (is_major == 5));
var is_nav6up = (is_nav && (is_major >= 5));
var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
</script>
<script language="JavaScript">
//tooltip Position
var offsetX = 0;
var offsetY = 5;
var opacity = 100;
var toolTipSTYLE;
function initToolTips(){
if(document.getElementById){
toolTipSTYLE = document.getElementById("toolTipLayer").style;
}
if(is_ie || is_nav6up)
{
toolTipSTYLE.visibility = "visible";
toolTipSTYLE.display = "none";
document.onmousemove = moveToMousePos;
}
}
function moveToMousePos(e)
{
if(!is_ie){
x = e.pageX;
y = e.pageY;
}else{
x = event.x + document.body.scrollLeft;
y = event.y + document.body.scrollTop;
}
toolTipSTYLE.left = x + offsetX+'px';
toolTipSTYLE.top = y + offsetY+'px';
return true;
}
function toolTip(msg, fg, bg)
{
if(toolTip.arguments.length < 1) // if no arguments are passed then hide the tootip
{
if(is_nav4)
toolTipSTYLE.visibility = "hidden";
else
toolTipSTYLE.display = "none";
}
else // show
{
if(!fg) fg = "#777777";
if(!bg) bg = "#ffffe5";
var content = '<table border="0" cellspacing="0" cellpadding="0" class="toolTip"><tr><td bgcolor="' + fg + '">' +
'<table border="0" cellspacing="1" cellpadding="0"<tr><td bgcolor="' + bg + '">'+
'<font face="sans-serif" color="' + fg + '" size="-2">' + msg +
'</font></td></tr></table>'+
'</td></tr></table>';
if(is_nav4)
{
toolTipSTYLE.document.write(content);
toolTipSTYLE.document.close();
toolTipSTYLE.visibility = "visible";
}
else if(is_ie || is_nav6up)
{
document.getElementById("toolTipLayer").innerHTML = content;
toolTipSTYLE.display='block'
}
}
}
s = '<table width="100%" cellspacing="2" cellpadding="0" border="0">';
s += '<tr><td><img src="http://upload.wikimedia.org/wikipedia/meta/2/2a/Nohat-logo-nowords-bgwhite-200px.jpg" border="0"/> </td><td valign="top">WikiPedia</td></tr>';
s += '<tr><td colspan="2" class="Text"><hr/>this is a test for simple tooltip. <br/>You can add text and images to the tooltip</td></tr>';
s += '</table>'
function show(){
toolTip(s)
}
//--></script>
</head>
<body onload="initToolTips();">
<div id="toolTipLayer" style="position:absolute; visibility: hidden;left:0;right:0"></div>
<br/><br/>
<br/><br/>
<span onMouseOver="toolTip('simple Tooltip Text here')" onMouseOut="toolTip()" class="Text">Simple Tooltip</span>
<br/><br/>
<span onMouseOver="toolTip('Tooltip with colors set', '#FFFF00', 'orange')"; onMouseOut="toolTip()"; class="Text">Tooltip with Font Colors Set</span>
<br/><br/>
<span onMouseOver="show()" onMouseOut="toolTip()" class="Text">Tooltip with Images and Text</span>
<br/><br/>
<span class="Text"> The Microsoft .NET Framework is a software component that can be added to or is included with Microsoft Windows operating system. It provides a large body of pre-coded solutions to common program requirements, and manages the execution of programs written specifically for the framework. The .NET Framework is a key Microsoft offering, and is intended to be used by most new applications created for the Windows platform.</span>
</body>
</html>
一个简单的基于纯js实现的Tooltip 带有Images及Text显示
需积分: 16 10 浏览量
2008-12-27
11:37:48
上传
评论
收藏 2KB ZIP 举报
领君2018
- 粉丝: 204
- 资源: 1527
最新资源
- 请以C语言10进制转2进制示例.docx
- DMP3130L-VB一款P-Channel沟道SOT23的MOSFET晶体管参数介绍与应用说明
- halcon缺陷检测.docx
- 3DEC/UDEC4.0安装包,有好多;都是我在闲鱼买的 有需要的自己下载
- DMP3130L-7-VB一款P-Channel沟道SOT23的MOSFET晶体管参数介绍与应用说明
- Unity插件 视频播放插件AVPro 1.7.3
- DMP3120L-VB一款SOT23封装P-Channel场效应MOS管
- BEG模型原始论文:C-Pack: Packaged Resources To Advance General Chinese
- 测试平台项目代码web
- "操作系统开发+Linux内核+源码注释+技术研究参考"
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈