一个简单的基于纯js实现的Tooltip带有Images及Text显示

共1个文件

html：1个

Tooltip

需积分: 16 10 浏览量 2008-12-27 11:37:48 上传评论收藏 2KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

A Simple Tooltip With Images And Text.zip （1个子文件）

tooltip.html 5KB

<!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>

评论收藏

内容反馈