»
EnglishFrenchVietnamese

Print - Sweet Titles - JavaScriptBank.com

Full version: jsB@nk » Link » Tooltip » Sweet Titles
URL: http://www.javascriptbank.com/sweet-titles.html

Sweet Titles © JavaScriptBank.comThis script will display the titles on your links in a very "sweet" manner. The look is customized by using CSS and is easily changed. Degrades very nicely. Additional modifications are available on Dustin's Web site.

Full version: jsB@nk » Link » Tooltip » Sweet Titles
URL: http://www.javascriptbank.com/sweet-titles.html



CSS
<style type="text/css">/* Fading Tooltips */div#toolTip {  position:absolute;  width:220px;  background:#00009C;  border:2px double #fff;  text-align:left;  padding:5px;  -moz-border-radius:5px;  z-index:1000;}div#toolTip p {  margin:0;  padding:0;  color:#fff;  font:11px/12px verdana,arial,serif;}div#toolTip p em {  display:block;  margin-top:3px;  color:#FFCF31;  font-style:normal;  font-weight:bold;}</style><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


JavaScript
<script language="javascript" name="toolTipLib1.js">// Created by: Dustin Diaz :: http://www.dustindiaz.com/function addEvent(elm, evType, fn, useCapture) {        if (elm.addEventListener) {         elm.addEventListener(evType, fn, useCapture);         return true;         }        else if (elm.attachEvent) {         var r = elm.attachEvent('on' + evType, fn);         EventCache.add(elm, evType, fn);        return r;         }        else {        elm['on' + evType] = fn;        }}function getEventSrc(e) {        if (!e) e = window.event;        if (e.originalTarget)        return e.originalTarget;        else if (e.srcElement)        return e.srcElement;}function addLoadEvent(func) {var oldonload = window.onload;        if (typeof window.onload != 'function') {        window.onload = func;        } else {        window.onload =                 function() {                oldonload();                func();                }        }}var EventCache = function(){        var listEvents = [];        return {                listEvents : listEvents,                        add : function(node, sEventName, fHandler, bCapture){                        listEvents.push(arguments);                },                        flush : function(){                        var i, item;                        for(i = listEvents.length - 1; i >= 0; i = i - 1){                                item = listEvents[i];                                                                if(item[0].removeEventListener){                                        item[0].removeEventListener(item[1], item[2], item[3]);                                };                                                                /* From this point on we need the event names to be prefixed with 'on" */                                if(item[1].substring(0, 2) != "on"){                                        item[1] = "on" + item[1];                                };                                                                if(item[0].detachEvent){                                        item[0].detachEvent(item[1], item[2]);                                };                                                                item[0][item[1]] = null;                        };                }        };}();addEvent(window,'unload',EventCache.flush, false);</script><script type=text/javascript name="toolTipLib2.js">/* This script and many more are available free online atThe JavaScript Source :: http://javascript.internet.comCreated by: Dustin Diaz :: http://www.dustindiaz.com/ */// Additional Info: http://www.dustindiaz.com/sweet-titles/var toolTipLib = {         xCord : 0,        yCord : 0,        obj : null,        tipElements : ['a','abbr','acronym'],        attachToolTipBehavior: function() {                if ( !document.getElementById ||                        !document.createElement ||                        !document.getElementsByTagName ) {                        return;                }                var i,j;                addEvent(document,'mousemove',toolTipLib.updateXY,false);                if ( document.captureEvents ) {                                document.captureEvents(Event.MOUSEMOVE);                }                for ( i=0;i<toolTipLib.tipElements.length;i++ ) {                        var current = document.getElementsByTagName(toolTipLib.tipElements[i]);                        for ( j=0;j<current.length;j++ ) {                                addEvent(current[j],'mouseover',toolTipLib.tipOver,false);                                addEvent(current[j],'mouseout',toolTipLib.tipOut,false);                                current[j].setAttribute('tip',current[j].title);                                current[j].removeAttribute('title');                        }                }        },        updateXY : function(e) {                if ( document.captureEvents ) {                        toolTipLib.xCord = e.pageX;                        toolTipLib.yCord = e.pageY;                } else if ( window.event.clientX ) {                        toolTipLib.xCord = window.event.clientX+document.documentElement.scrollLeft;                        toolTipLib.yCord = window.event.clientY+document.documentElement.scrollTop;                }        },        tipOut: function(e) {                if ( window.tID ) {                        clearTimeout(tID);                }                if ( window.opacityID ) {                        clearTimeout(opacityID);                }                var l = getEventSrc(e);                var div = document.getElementById('toolTip');                if ( div ) {                        div.parentNode.removeChild(div);                }        },        checkNode : function(obj) {                var trueObj = obj;                if ( trueObj.nodeName.toLowerCase() == 'a' || trueObj.nodeName.toLowerCase() == 'acronym' || trueObj.nodeName.toLowerCase() == 'abbr' ) {                        return trueObj;                } else {                        return trueObj.parentNode;                }        },        tipOver : function(e) {                toolTipLib.obj = getEventSrc(e);                tID = setTimeout("toolTipLib.tipShow()",500)        },        tipShow : function() {                var newDiv = document.createElement('div');                var scrX = Number(toolTipLib.xCord);                var scrY = Number(toolTipLib.yCord);                var tp = parseInt(scrY+15);                var lt = parseInt(scrX+10);                var anch = toolTipLib.checkNode(toolTipLib.obj);                var addy = '';                var access = '';                if ( anch.nodeName.toLowerCase() == 'a' ) {                        addy = (anch.href.length > 25 ? anch.href.toString().substring(0,25)+"..." : anch.href);                        var access = ( anch.accessKey ? ' <span>['+anch.accessKey+']</span> ' : '' );                } else {                        addy = anch.firstChild.nodeValue;                }                newDiv.id = 'toolTip';                document.getElementsByTagName('body')[0].appendChild(newDiv);                newDiv.style.opacity = '.1';                newDiv.innerHTML = "<p>"+anch.getAttribute('tip')+"<em>"+access+addy+"</em></p>";                if ( parseInt(document.documentElement.clientWidth+document.documentElement.scrollLeft) < parseInt(newDiv.offsetWidth+lt) ) {                        newDiv.style.left = parseInt(lt-(newDiv.offsetWidth+10))+'px';                } else {                        newDiv.style.left = lt+'px';                }                if ( parseInt(document.documentElement.clientHeight+document.documentElement.scrollTop) < parseInt(newDiv.offsetHeight+tp) ) {                        newDiv.style.top = parseInt(tp-(newDiv.offsetHeight+10))+'px';                } else {                        newDiv.style.top = tp+'px';                }                toolTipLib.tipFade('toolTip',10);        },        tipFade: function(div,opac) {                var obj = document.getElementById(div);                var passed = parseInt(opac);                var newOpac = parseInt(passed+10);                if ( newOpac < 80 ) {                        obj.style.opacity = '.'+newOpac;                        obj.style.filter = "alpha(opacity:"+newOpac+")";                        opacityID = setTimeout("toolTipLib.tipFade('toolTip','"+newOpac+"')",20);                }                else {                         obj.style.opacity = '.80';                        obj.style.filter = "alpha(opacity:80)";                }        }};addEvent(window,'load',toolTipLib.attachToolTipBehavior,false);</script><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<UL>        <LI><A title="This is an excellent Web site" href="http://www.JavaScriptBank.com/">JavaScriptBank.com</A>         <LI><A title="Another nice Web site" href="http://www.JavaScriptBank.com/">JavaScriptBank.com</A>         <LI><A href="http://www.JavaScriptBank.com/">JavaScriptBank.com</A>       </LI></UL><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->