/*********************************************** ***********************************************/ // Precompute some flags var dom = document.getElementById; var ns5 = !document.all && dom || window.opera; var ie5 = navigator.userAgent.indexOf("MSIE") > -1 && dom; var ie4 = document.all && !dom; var ie45ns5 = ie4 || ie5 || ns5; var nodyn = !ns5 && !ie4 && !ie5 && !dom; // avoid error of passing event object in older browsers if (nodyn) { event = "nope" } /////////////////////// CUSTOMIZE HERE //////////////////// // settings for tooltip // Do you want tip to move when mouse moves over link? var tipFollowMouse = true; // Be sure to set tipWidth wide enough for widest image var tipWidth = 160; var xOffset = 20; // how far from mouse to show tip var yOffset = 12; var tipCSSClass = "tipStyle"; // Pick up CSS style for the div from this. var frameCSSClass = "imageFrameStyle"; // Pick up CSS style for the div from this. //////////////////// END OF CUSTOMIZATION AREA /////////////////// // TODO: Preloading goes here... // try a div with some formatting... var styleStr = 'style="' + ';' + 'border: 0;' + '"'; //////////////////////////////////////////////////////////// // initTip - initialization for tooltip. // Global variables for tooltip. // Set styles // Set up mousemove capture if tipFollowMouse set true. //////////////////////////////////////////////////////////// var tooltip, tooltipStyle; var imageFrame, imageFrameStyle; var timer1, timer2, timer3, timer4; // for setTimeouts var tipOn = false; // check if over tooltip link function initTip() { if (nodyn) return; tooltip = ie4 ? document.all['tipDiv'] : ie5 || ns5 ? document.getElementById('tipDiv') : null; tooltipStyle = tooltip.style; if (tooltip && tipFollowMouse) { document.onmousemove = trackMouse; } } function initFrame() { imageFrame = ie4 ? document.all['imageFrameDiv'] : ie5 || ns5 ? document.getElementById('imageFrameDiv') : null; imageFrameStyle = imageFrame.style; } function initializeDivs() { initTip(); initFrame(); } var winWd, winHt; function getWindowSize() { // document area in view (subtract scrollbar width for ns) if (ns5) { winWd = window.innerWidth + window.pageXOffset - 20; winHt = window.innerHeight + window.pageYOffset - 20; } else { winWd = standardbody.clientWidth+standardbody.scrollLeft; winHt = standardbody.clientHeight+standardbody.scrollTop; } } // Don't add an onload attribute in the HTML's tag, or it will conflict // with this! :) window.onload = initializeDivs; // Don't use () on this call in IE6!!! function showTip() { if (!tooltip) return; timer1 = setTimeout("tooltipStyle.visibility='visible';", 100); } // Storage space for message callbacks... details about the image go here. var imageForFrame, topLeftText, bottomLeftText; function prepareFrame() { if (ie45ns5) { // Try a div. :) // var interiorText = 'Window width is ' + winWd + ' px'; // var belowText = 'height is ' + winHt + ' px.'; var msg = ""; msg = msg + ""; msg = msg + "

" + "

" + "

" + "

" + topLeftText + "

" + "

" + bottomLeftText + "

" + "

"; msg = msg + "" + "

" + "" + "

" + ""; var tip = '

' + msg + '

'; imageFrame.innerHTML = tip; } } // Duplicate the functionality of Netscape's window.pageYOffset for // a generic browser. function getPageYOffset() { if (typeof(window.pageYOffset) == 'number') { // Netscape compliant return window.pageYOffset; } else if (document.body && // DOM compliant (document.body.scrollLeft || document.body.scrollTop)) { return document.body.scrollTop; } else if (document.documentElement && // IE6 standards compliant mode (document.documentElement.scrollLeft || document.documentElement.scrollTop)) { return document.documentElement.scrollTop; } else { return 0; } } var timer3Countdown, timer3UpperLimit; function showFrameCallback() { getWindowSize(); imageFrameStyle.top = getPageYOffset() + yOffset + "px"; imageFrame.className = frameCSSClass; var frameWidth = ie4||ie5 ? imageFrame.clientWidth : imageFrame.offsetWidth; imageFrameStyle.left = (winWd - frameWidth) / 2 + "px"; if (timer3Countdown) { if (timer3Countdown == timer3UpperLimit) { // Show it only once. imageFrameStyle.visibility='visible'; } --timer3Countdown; timer3 = setTimeout("showFrameCallback();", 100); } } function showFrame(img, msg1, msg2) { if (!imageFrame) return; imageForFrame = img; topLeftText = msg1; bottomLeftText = msg2; prepareFrame(); timer3UpperLimit = 20; timer3Countdown = timer3UpperLimit; timer3 = setTimeout("showFrameCallback();", 100); } function hideTip() { if (!tooltip) return; timer2 = setTimeout("tooltipStyle.visibility='hidden';", 100); tipOn = false; } function hideFrame() { if (!imageFrame) return; timer4 = setTimeout("imageFrameStyle.visibility='hidden';", 100); tipOn = false; } var mouseX, mouseY; ///////////////////////////////////////////////// // doTooltip function ///////////////////////////////////////////////// function doTooltip(evt, msg, style) { if (!tooltip) return; if (timer1) clearTimeout(timer1); if (timer2) clearTimeout(timer2); tipOn = true; // set a second style to the addressed style if the user provides one. tooltip.className = style != null ? tipCSSClass + " " + style : tipCSSClass; if (ie45ns5) { // Try a div. :) // msg = msg + ":" + mouseX + ":" + mouseY; var tip = '

' + msg + '

'; tooltip.innerHTML = tip; } if (tipFollowMouse) showTip(); else positionTip(evt); } function getStandardBody() { return document.compatMode == "CSS1Compat" ? document.documentElement : document.body; } function followMouse(evt) { standardbody = getStandardBody(); mouseX = ns5 ? evt.pageX: window.event.clientX + standardbody.scrollLeft; mouseY = ns5 ? evt.pageY: window.event.clientY + standardbody.scrollTop; } function trackMouse(evt) { followMouse(evt); if (tipOn) positionTip(evt); } ///////////////////////////////////////////////////////////// // positionTip function // If tipFollowMouse is false, then the trackMouse function // is not being used. // In that case, get the position of mouseover event. // Calculations use mouseover event position, // offset amounts and tooltip width to position // tooltip within window. ///////////////////////////////////////////////////////////// function positionTip(evt) { if (!tipFollowMouse) { followMouse(evt); } // tooltip width and height var tipWidth = ie4||ie5 ? tooltip.clientWidth : tooltip.offsetWidth; var tipHeight = ie4||ie5 ? tooltip.clientHeight : tooltip.offsetHeight; getWindowSize(); // Bound tooltipStyle position against the window. tooltipStyle.left = mouseX + xOffset + tipWidth > winWd ? winWd - (tipWidth+xOffset) + "px" : mouseX + xOffset + "px"; tooltipStyle.top = mouseY + yOffset + tipHeight > winHt ? winHt - (tipHeight+yOffset) + "px" : mouseY + yOffset + "px"; if (!tipFollowMouse) showTip(); } document.write('

' + '

' + '

' + '

');