sweet titles
This 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.
CODE
<!-- Paste this code into the CSS section of your HTML document -->
/* 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;
}
<!-- Paste this code into an external JavaScript file named: toolTipLib1.js -->
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);
<!-- Paste this code into the HEAD section of your HTML document.
You may need to change the path of the file. -->
<script type="text/javascript" src="toolTipLib1.js"></script>
<!-- Paste this code into an external JavaScript file named: toolTipLib2.js -->
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);
<!-- Paste this code into the HEAD section of your HTML document.
You may need to change the path of the file. -->
<script type="text/javascript" src="toolTipLib2.js"></script>
cheerz!
shiv
