javascript tooltip dw_viewport.js tooltip.js

tooltip<br />1. JS檔案代碼：tooltip.js (請不要更改！避免發生錯誤！)<br />/*************************************************************************<br /> dw_viewport.js<br /> version date Nov 2003</p><p> This code is from Dynamic Web Coding<br /> at http://www.dyn-web.com/<br /> Copyright 2003 by Sharon Paine<br /> See Terms of Use at http://www.dyn-web.com/bus/terms.html<br /> regarding conditions under which you may use this code.<br /> This notice must be retained in the code as is!<br />*************************************************************************/ </p><p>var viewport = {<br /> getWinWidth: function () {<br /> this.width = 0;<br /> if (window.innerWidth) this.width = window.innerWidth - 18;<br /> else if (document.documentElement && document.documentElement.clientWidth)<br /> this.width = document.documentElement.clientWidth;<br /> else if (document.body && document.body.clientWidth)<br /> this.width = document.body.clientWidth;<br /> },</p><p> getWinHeight: function () {<br /> this.height = 0;<br /> if (window.innerHeight) this.height = window.innerHeight - 18;<br /> else if (document.documentElement && document.documentElement.clientHeight)<br /> this.height = document.documentElement.clientHeight;<br /> else if (document.body && document.body.clientHeight)<br /> this.height = document.body.clientHeight;<br /> },</p><p> getScrollX: function () {<br /> this.scrollX = 0;<br /> if (typeof window.pageXOffset == "number") this.scrollX = window.pageXOffset;<br /> else if (document.documentElement && document.documentElement.scrollLeft)<br /> this.scrollX = document.documentElement.scrollLeft;<br /> else if (document.body && document.body.scrollLeft)<br /> this.scrollX = document.body.scrollLeft;<br /> else if (window.scrollX) this.scrollX = window.scrollX;<br /> },</p><p> getScrollY: function () {<br /> this.scrollY = 0;<br /> if (typeof window.pageYOffset == "number") this.scrollY = window.pageYOffset;<br /> else if (document.documentElement && document.documentElement.scrollTop)<br /> this.scrollY = document.documentElement.scrollTop;<br /> else if (document.body && document.body.scrollTop)<br /> this.scrollY = document.body.scrollTop;<br /> else if (window.scrollY) this.scrollY = window.scrollY;<br /> },</p><p> getAll: function () {<br /> this.getWinWidth(); this.getWinHeight();<br /> this.getScrollX(); this.getScrollY();<br /> }</p><p>}<br />/*************************************************************************<br /> dw_event.js (version date Feb 2004)</p><p> This code is from Dynamic Web Coding at http://www.dyn-web.com/<br /> See Terms of Use at http://www.dyn-web.com/bus/terms.html<br /> regarding conditions under which you may use this code.<br /> This notice must be retained in the code as is!<br />*************************************************************************/<br />var dw_event = {</p><p> add: function(obj, etype, fp, cap) {<br /> cap = cap || false;<br /> if (obj.addEventListener) obj.addEventListener(etype, fp, cap);<br /> else if (obj.attachEvent) obj.attachEvent("on" + etype, fp);<br /> },<br /> remove: function(obj, etype, fp, cap) {<br /> cap = cap || false;<br /> if (obj.removeEventListener) obj.removeEventListener(etype, fp, cap);<br /> else if (obj.detachEvent) obj.detachEvent("on" + etype, fp);<br /> },<br /> DOMit: function(e) {<br /> e = e? e: window.event;<br /> e.tgt = e.srcElement? e.srcElement: e.target;</p><p> if (!e.preventDefault) e.preventDefault = function () { return false; }<br /> if (!e.stopPropagation) e.stopPropagation = function () { if (window.event) window.event.cancelBubble = true; }</p><p> return e;<br /> }</p><p>}<br />/*************************************************************************<br /> dw_tooltip.js requires: dw_event.js and dw_viewport.js<br /> version date: March 14, 2005<br /> (minor changes in position algorithm and timer mechanism)</p><p> This code is from Dynamic Web Coding at dyn-web.com<br /> Copyright 2003-5 by Sharon Paine<br /> See Terms of Use at www.dyn-web.com/bus/terms.html<br /> regarding conditions under which you may use this code.<br /> This notice must be retained in the code as is!<br />*************************************************************************/<br />var Tooltip = {<br /> followMouse: true,<br /> offX: 8,<br /> offY: 12,<br /> tipID: "tipDiv",<br /> showDelay: 100,<br /> hideDelay: 200,</p><p> ready:false, timer:null, tip:null, </p><p> init: function() {<br /> if ( document.createElement && document.body && typeof document.body.appendChild != "undefined" ) {<br /> if ( !document.getElementById(this.tipID) ) {<br /> var el = document.createElement("DIV");<br /> el.id = this.tipID; document.body.appendChild(el);<br /> }<br /> this.ready = true;<br /> }<br /> },</p><p> show: function(e, msg) {<br /> if (this.timer) { clearTimeout(this.timer); this.timer = 0; }<br /> this.tip = document.getElementById( this.tipID );<br /> if (this.followMouse) // set up mousemove<br /> dw_event.add( document, "mousemove", this.trackMouse, true );<br /> this.writeTip(""); // for mac ie<br /> this.writeTip(msg);<br /> viewport.getAll();<br /> this.positionTip(e);<br /> this.timer = setTimeout("Tooltip.toggleVis('" + this.tipID + "', 'visible')", this.showDelay);<br /> },</p><p> writeTip: function(msg) {<br /> if ( this.tip && typeof this.tip.innerHTML != "undefined" ) this.tip.innerHTML = msg;<br /> },</p><p> positionTip: function(e) {<br /> if ( this.tip && this.tip.style ) {<br /> // put e.pageX/Y first! (for Safari)<br /> var x = e.pageX? e.pageX: e.clientX + viewport.scrollX;<br /> var y = e.pageY? e.pageY: e.clientY + viewport.scrollY;</p><p> if ( x + this.tip.offsetWidth + this.offX > viewport.width + viewport.scrollX ) {<br /> x = x - this.tip.offsetWidth - this.offX;<br /> if ( x < 0 ) x = 0;<br /> } else x = x + this.offX;</p><p> if ( y + this.tip.offsetHeight + this.offY > viewport.height + viewport.scrollY ) {<br /> y = y - this.tip.offsetHeight - this.offY;<br /> if ( y < viewport.scrollY ) y = viewport.height + viewport.scrollY - this.tip.offsetHeight;<br /> } else y = y + this.offY;</p><p> this.tip.style.left = x + "px"; this.tip.style.top = y + "px";<br /> }<br /> },</p><p> hide: function() {<br /> if (this.timer) { clearTimeout(this.timer); this.timer = 0; }<br /> this.timer = setTimeout("Tooltip.toggleVis('" + this.tipID + "', 'hidden')", this.hideDelay);<br /> if (this.followMouse) // release mousemove<br /> dw_event.remove( document, "mousemove", this.trackMouse, true );<br /> this.tip = null;<br /> },<br /> toggleVis: function(id, vis) { // to check for el, prevent (rare) errors<br /> var el = document.getElementById(id);<br /> if (el) el.style.visibility = vis;<br /> },</p><p> trackMouse: function(e) {<br /> e = dw_event.DOMit(e);<br /> Tooltip.positionTip(e);<br /> }</p><p>}<br />Tooltip.init();<br />2. 頭部<head>……</head>代碼：<br /><mce:script type="text/javascript"><!--<br />function doTooltip(e, msg) {<br /> if ( typeof Tooltip == "undefined" || !Tooltip.ready ) return;<br /> Tooltip.show(e, msg);<br />}<br />function hideTip() {<br /> if ( typeof Tooltip == "undefined" || !Tooltip.ready ) return;<br /> Tooltip.hide();<br />}<br />// --></mce:script><br />3. <body>……</body>引用：<br /><mce:script src="js檔案存放目錄/tooltip.js" mce_src="js檔案存放目錄/tooltip.js" type="text/javascript"></mce:script><br /><a href="" onmouseover="doTooltip(event,'提示文字')" onmouseout="hideTip()">連結</a>