DHTML CSS+JavaScript设计网页链接提示ToolTips
2011-11-21 15:55
323 查看
<html> <head> <style type="text/css"> /**//* YOU CAN REMOVE THIS PART */ body{ background-image:url('http://images.cnblogs.com/heading3.gif'); background-repeat:no-repeat; padding-top:85px; font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; font-size:0.9em; line-height:130%; } h1{ line-height:130%; } a{ color: #D60808; text-decoration:none; font-weight:bold; } a:hover{ border-bottom:1px dotted #317082; color: #307082; } /**//* END PART YOU CAN REMOVE */ #dhtmlgoodies_tooltip{ background-color:#EEE; border:1px solid #000; position:absolute; display:none; z-index:20000; padding:2px; font-size:0.9em; -moz-border-radius:6px;/**//* Rounded edges in Firefox */ font-family: "Trebuchet MS", "Lucida Sans Unicode", Arial, sans-serif; } #dhtmlgoodies_tooltipShadow{ position:absolute; background-color:#555; display:none; z-index:10000; opacity:0.7; filter:alpha(opacity=70); -khtml-opacity: 0.7; -moz-opacity: 0.7; -moz-border-radius:6px;/**//* Rounded edges in Firefox */ } </style> <SCRIPT type="text/javascript"> /**//************************************************************************************************************ (C) www.dhtmlgoodies.com, October 2005 This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website. Updated: March, 11th, 2006 - Fixed positioning of tooltip when displayed near the right edge of the browser. April, 6th 2006, Using iframe in IE in order to make the tooltip cover select boxes. Terms of use: You are free to use this script as long as the copyright message is kept intact. However, you may not redistribute, sell or repost it without our permission. Thank you! www.dhtmlgoodies.com Alf Magne Kalleland ************************************************************************************************************/ var dhtmlgoodies_tooltip =false; var dhtmlgoodies_tooltipShadow =false; var dhtmlgoodies_shadowSize =4; var dhtmlgoodies_tooltipMaxWidth =700; var dhtmlgoodies_tooltipMinWidth =200; var dhtmlgoodies_iframe =false; var tooltip_is_msie = (navigator.userAgent.indexOf('MSIE')>=0&& navigator.userAgent.indexOf('opera')==-1&& document.all)?true:false; function showTooltip(e,tooltipTxt) { var bodyWidth = Math.max(document.body.clientWidth,document.documentElement.clientWidth) -20; if(!dhtmlgoodies_tooltip) { dhtmlgoodies_tooltip = document.createElement('DIV'); dhtmlgoodies_tooltip.id ='dhtmlgoodies_tooltip'; dhtmlgoodies_tooltipShadow = document.createElement('DIV'); dhtmlgoodies_tooltipShadow.id ='dhtmlgoodies_tooltipShadow'; document.body.appendChild(dhtmlgoodies_tooltip); document.body.appendChild(dhtmlgoodies_tooltipShadow); if(tooltip_is_msie) { dhtmlgoodies_iframe = document.createElement('IFRAME'); dhtmlgoodies_iframe.frameborder='5'; dhtmlgoodies_iframe.style.backgroundColor='#FFFFFF'; dhtmlgoodies_iframe.src ='#'; dhtmlgoodies_iframe.style.zIndex =100; dhtmlgoodies_iframe.style.position ='absolute'; document.body.appendChild(dhtmlgoodies_iframe); } } dhtmlgoodies_tooltip.style.display='block'; dhtmlgoodies_tooltipShadow.style.display='block'; if(tooltip_is_msie)dhtmlgoodies_iframe.style.display='block'; var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop); if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0; var leftPos = e.clientX +10; dhtmlgoodies_tooltip.style.width =null; // Reset style width if it's set dhtmlgoodies_tooltip.innerHTML = tooltipTxt; dhtmlgoodies_tooltip.style.left = leftPos +'px'; dhtmlgoodies_tooltip.style.top = e.clientY +10+ st +'px'; dhtmlgoodies_tooltipShadow.style.left = leftPos + dhtmlgoodies_shadowSize +'px'; dhtmlgoodies_tooltipShadow.style.top = e.clientY +10+ st + dhtmlgoodies_shadowSize +'px'; if(dhtmlgoodies_tooltip.offsetWidth>dhtmlgoodies_tooltipMaxWidth) { /**//* Exceeding max width of tooltip ? */ dhtmlgoodies_tooltip.style.width = dhtmlgoodies_tooltipMaxWidth +'px'; } var tooltipWidth = dhtmlgoodies_tooltip.offsetWidth; if(tooltipWidth<dhtmlgoodies_tooltipMinWidth)tooltipWidth = dhtmlgoodies_tooltipMinWidth; dhtmlgoodies_tooltip.style.width = tooltipWidth +'px'; dhtmlgoodies_tooltipShadow.style.width = dhtmlgoodies_tooltip.offsetWidth +'px'; dhtmlgoodies_tooltipShadow.style.height = dhtmlgoodies_tooltip.offsetHeight +'px'; if((leftPos + tooltipWidth)>bodyWidth) { dhtmlgoodies_tooltip.style.left = (dhtmlgoodies_tooltipShadow.style.left.replace('px','') - ((leftPos + tooltipWidth)-bodyWidth)) +'px'; dhtmlgoodies_tooltipShadow.style.left = (dhtmlgoodies_tooltipShadow.style.left.replace('px','') - ((leftPos + tooltipWidth)-bodyWidth) + dhtmlgoodies_shadowSize) +'px'; } if(tooltip_is_msie) { dhtmlgoodies_iframe.style.left = dhtmlgoodies_tooltip.style.left; dhtmlgoodies_iframe.style.top = dhtmlgoodies_tooltip.style.top; dhtmlgoodies_iframe.style.width = dhtmlgoodies_tooltip.offsetWidth +'px'; dhtmlgoodies_iframe.style.height = dhtmlgoodies_tooltip.offsetHeight +'px'; } } function hideTooltip() { dhtmlgoodies_tooltip.style.display='none'; dhtmlgoodies_tooltipShadow.style.display='none'; if(tooltip_is_msie)dhtmlgoodies_iframe.style.display='none'; } </SCRIPT> </head> <body> <h1>Roll your mouse over the links in the text below</h1> <P>Splendida porro oculi <a href="#" onmouseout="hideTooltip()" onmouseover="showTooltip(event,'This is a tooltip with a transparent shadow effect. Can you see the letters underneath the shadow?');return false">Roll over me</a> uitantque tueri. Splendida porro oculi fugitant uitantque tueri. </P> </body> </html>
相关文章推荐
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第25讲_js系统函数_js函数调用方式_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第31讲_this关键字详解_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第33讲_Object类_闭包_成员函数再说明_聪明的猪小练习_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第23讲_js三大流程控制(顺序流程、分支控制、循环控制)_js调式技巧_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第34讲_js超级玛丽小游戏_学习笔记_源代码图解_PPT文档整理
- 网页设计高手必备:HTML、CSS、Javascript教程资料
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第19讲_js运行原理_js开发工具介绍_js程序(hello)_js基本语法_学习笔记_源代码图解_PPT文档整理
- 网页设计与开发——HTML、CSS、JavaScript
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第24讲_js案例讲解_js自定义函数_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第24讲_js案例讲解_js自定义函数_学习笔记_源代码图解_PPT文档整理
- 网页设计与开发:HTML、CSS、JavaScript实例教程 (郑娅峰) pdf扫描版
- HTML学习笔记——标准网页设计+使用CSS、Javascript
- 网页设计与开发——HTML、CSS、JavaScript (王津涛) pdf扫描版
- (清华大学HTML+CSS+JavaScript入门到精通学习笔记)第一章 网页设计基础
- 韩顺平_轻松搞定网页设计(html+css+javascript)_ 第18讲_js课程介绍_js基本介绍_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第26讲_js函数调用过程内存分析_js函数细节_学习笔记_源代码图解_PPT文档整理
- 网页设计高手必备:HTML、CSS、Javascript教程资料
- 网页设计语言 HTML,XHTML,CSS,JavaScript 入门简介
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第22讲_js三大流程控制(顺序流程、分支控制、循环控制)_学习笔记_源代码图解_PPT文档整理