//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; }; if (mapMaker.DLs[i].className == 'map3') { //change map DL class, this way map is text only without javascript enabled mapMaker.DLs[i].className = 'map3 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; }; if (mapMaker.DLs[i].className == 'map4') { //change map DL class, this way map is text only without javascript enabled mapMaker.DLs[i].className = 'map4 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; }; if (mapMaker.DLs[i].className == 'map5') { //change map DL class, this way map is text only without javascript enabled mapMaker.DLs[i].className = 'map5 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; }; if (mapMaker.DLs[i].className == 'map6') { //change map DL class, this way map is text only without javascript enabled mapMaker.DLs[i].className = 'map6 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; }; if (mapMaker.DLs[i].className == 'map7') { //change map DL class, this way map is text only without javascript enabled mapMaker.DLs[i].className = 'map7 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; }; if (mapMaker.DLs[i].className == 'map8') { //change map DL class, this way map is text only without javascript enabled mapMaker.DLs[i].className = 'map8 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; }; if (mapMaker.DLs[i].className == 'map9') { //change map DL class, this way map is text only without javascript enabled mapMaker.DLs[i].className = 'map9 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; }; if (mapMaker.DLs[i].className == 'map10') { //change map DL class, this way map is text only without javascript enabled mapMaker.DLs[i].className = 'map10 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; }; if (mapMaker.DLs[i].className == 'map11') { //change map DL class, this way map is text only without javascript enabled mapMaker.DLs[i].className = 'map11 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("