//sticky tooltip exaple var mapMaker = {	offsetX: -16, // tooltip X offset	offsetY: 16,  // tooltip Y offset	element: null,	DLs:     false,	DTs:     false,	DDs:     false,	on:      false,	/* constructor - sets events */	init: function(){		var i=0;		var ii=0;		var currentLocation = 0;		mapMaker.DLs = document.getElementsByTagName('dl');		mapMaker.DTs = document.getElementsByTagName('dt');		mapMaker.DDs = document.getElementsByTagName('dd');		// only loop thru items once		if( mapMaker.on == false ){			//loop through each DL on page			while (mapMaker.DLs.length > i) {				//only affect DLs with a class of 'map'				if (mapMaker.DLs[i].className == 'map'){					//change map DL class, this way map is text only without javascript enabled					mapMaker.DLs[i].className = 'map on';					//strip whitespace					mapMaker.stripWhitespace(mapMaker.DLs[i]);					mapMaker.stripWhitespace(mapMaker.DTs[i]);					mapMaker.stripWhitespace(mapMaker.DDs[i]);					// loop thru all DT elements					while (mapMaker.DTs.length > ii){						// set the link for the current DT						currentLocation = mapMaker.DTs[ii].firstChild;						// add events to links						mapMaker.addEvt(currentLocation,'mouseover',mapMaker.showTooltip);//displays tooltip on mouse over						mapMaker.addEvt(currentLocation,'focus',mapMaker.showTooltip);//display tooltip on focus, for added keyboard accessibility						mapMaker.addEvt(currentLocation,'blur',mapMaker.hideTooltip);//hide tooltip on focus, for added keyboard accessibility						ii++;					};					ii=0;					//loop through DT elements and assign event to close link					while (mapMaker.DDs.length > ii){						currentLocation = mapMaker.DDs[ii].firstChild;						mapMaker.addEvt(currentLocation,'click',mapMaker.hideTooltip);//hide tooltip on click of close button						ii++;					};					ii=0;				};				i++;			};			mapMaker.on = true;		};	},	/* SHOW TOOLTIP */	showTooltip: function() {		var evt = this;		var i = 0;		mapMaker.hideTooltip();		//Find DD to display - based on currently hovered anchor move to parent DT then next sibling DD		var objid = evt.parentNode.nextSibling;		mapMaker.element = objid;//set for the hideTooltip		//get width and height of background map		var mapWidth  = objid.parentNode.offsetWidth;		var mapHeight = objid.parentNode.offsetHeight;		//get width and height of the DD		var toopTipWidth = objid.offsetWidth;		var toopTipHeight = objid.offsetHeight;		//figure out where tooltip should be places based on point location		var newX = evt.offsetLeft + mapMaker.offsetX;		var newY = evt.offsetTop + mapMaker.offsetY;		//check if tooltip fits map width 		if ((newX + toopTipWidth) > mapWidth) {			objid.style.left = newX-toopTipWidth-24 + 'px';		} else {			objid.style.left = newX + 'px';		};		//check if tooltip fits map height 		if ((newY + toopTipHeight) > mapHeight) {			objid.style.top = newY-toopTipHeight-14 + 'px';		} else {			objid.style.top = newY + 'px';		};	},	/* HIDE TOOLTIP */	hideTooltip: function() {		if (mapMaker.element != null) {			mapMaker.element.style.left = '-9999px';		};	},	addEvt: function(element, type, handler) {		// assign each event handler a unique ID		if (!handler.$$guid) handler.$$guid = mapMaker.addEvt.guid++;		// create a hash table of event types for the element		if (!element.events) element.events = {};		// create a hash table of event handlers for each element/event pair		var handlers = element.events[type];		if (!handlers) {			handlers = element.events[type] = {};			// store the existing event handler (if there is one)			if (element["on" + type]) {				handlers[0] = element["on" + type];			};		};		// store the event handler in the hash table		handlers[handler.$$guid] = handler;		// assign a global event handler to do all the work		element["on" + type] = mapMaker.handleEvent;	},	handleEvent: function(event) {		var returnValue = true;		// grab the event object (IE uses a global event object)		event = event || mapMaker.fixEvent(window.event);		// get a reference to the hash table of event handlers		var handlers = this.events[event.type];		// execute each event handler		for (var i in handlers) {			this.$$handleEvent = handlers[i];			if (this.$$handleEvent(event) === false) {				returnValue = false;			};		};		return returnValue;	},	fixEvent: function(event) {		// add W3C standard event methods		event.preventDefault = mapMaker.fixEvent.preventDefault;		event.stopPropagation = mapMaker.fixEvent.stopPropagation;		return event;	},	stripWhitespace: function( el ){		for(var i = 0; i < el.childNodes.length; i++){			var node = el.childNodes[i];			if( node.nodeType == 3 &&				!/\S/.test(node.nodeValue) ) node.parentNode.removeChild(node);		}	}};mapMaker.fixEvent.preventDefault = function() {this.returnValue = false;};mapMaker.fixEvent.stopPropagation = function() {this.cancelBubble = true;};mapMaker.addEvt.guid = 1;/* LOAD SCRIPT */	/* for Mozilla */		if (document.addEventListener) {			document.addEventListener("DOMContentLoaded", mapMaker.init, null);		};			/* for Internet Explorer */		/*@cc_on @*/		/*@if (@_win32)			document.write("<script defer src=ie_onload.js><"+"/script>");		/*@end @*/			/* for other browsers */		mapMaker.addEvt( window, 'load', mapMaker.init);