Jump to content
xisto Community
Sign in to follow this  
shiv

Sweet Titles script will display the titles on your links in a very sweet&quo

Recommended Posts

try this one...its indeed sweet!

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.

<!-- 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
Edited by shiv (see edit history)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.