/* Image w/ description tooltip- By Dynamic Web Coding (www.dyn-web.com) Copyright 2002 by Sharon Paine Visit http://www.dynamicdrive.com for this script Adapted by Just One IT GmbH, Ricky Blankenaufulland - Changed might break usability for older browsers! - Most formatting should be done in CSS now */ /* IMPORTANT: Put script after tooltip div or put tooltip div just before . */ var dom = (document.getElementById) ? true : false; var ns5 = ((navigator.userAgent.indexOf("Gecko")>-1) && dom) ? true: false; var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false; var ns4 = (document.layers && !dom) ? true : false; var ie4 = (document.all && !dom) ? true : false; var nodyn = (!ns5 && !ns4 && !ie4 && !ie5) ? true : false; // resize fix for ns4 var origWidth, origHeight; if (ns4) { origWidth = window.innerWidth; origHeight = window.innerHeight; window.onresize = function() { if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0); } } // 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; var offX = 8; // how far from mouse to show tip var offY = 8; var fixX = -1; var fixY = -1; var tipFontFamily = "Verdana, arial, helvetica, sans-serif"; var tipFontSize = "8pt"; // tooltip content goes here (image, description, optional bgColor, optional textcolor) //var messages = new Array(); // multi-dimensional arrays containing: // image and text for tooltip // optional: bgColor and color to be sent to tooltip //messages[0] = new Array('red_balloon.gif','Here is a red balloon on a white background',"#FFFFFF"); //messages[1] = new Array('duck2.gif','Here is a duck on a light blue background.',"#DDECFF"); //messages[2] = new Array('test.gif','Test description','black','white'); //////////////////// END OF CUSTOMIZATION AREA /////////////////// // preload images that are to appear in tooltip // from arrays above //if (document.images) { // var theImgs = new Array(); // for (var i=0; i
'+ startStr + img + midStr + '' + hint + '' + endStr + '
'; tooltip.write(tip); tooltip.close(); } else if (ie4||ie5||ns5) { var tip; offX = setOffX; offY = setOffY; fixX = fixTipX; fixY = fixTipY; if(img.length > 0) { tip = startStr + img + midStr + hint + endStr; } else { tip = hint; } tooltip.innerHTML = tip; if(cssClass.length > 0) { tooltip.className = cssClass; } else { tooltip.className = ''; } if(tipWidth > 0) { tipcss.width = String(tipWidth)+'px'; } else { tipcss.width = ''; } } if (!tipFollowMouse) positionTip(evt); else t1=setTimeout("tipcss.visibility='visible'",100); window.status = hint; } var mouseX, mouseY; function trackMouse(evt) { mouseX = (ns4||ns5)? evt.pageX: window.event.clientX + document.body.scrollLeft; mouseY = (ns4||ns5)? evt.pageY: window.event.clientY + document.body.scrollTop; if (tipOn) positionTip(evt); } ///////////////////////////////////////////////////////////// // positionTip function // If tipFollowMouse set false, so trackMouse function // not being used, get position of mouseover event. // Calculations use mouseover event position, // offset amounts and tooltip width to position // tooltip within window. ///////////////////////////////////////////////////////////// function positionTip(evt) { if (!tipFollowMouse) { mouseX = (ns4||ns5)? evt.pageX: window.event.clientX + document.body.scrollLeft; mouseY = (ns4||ns5)? evt.pageY: window.event.clientY + document.body.scrollTop; } // tooltip width and height var tpWd = $('tipDiv').getWidth(); var tpHt = $('tipDiv').getHeight(); // document area in view (by Prototype) var winWd = document.viewport.getWidth(); var winHt = document.viewport.getHeight(); // check mouse position against tip and window dimensions // and position the tooltip var newTop = 0; var newLeft = 0; if(fixX > -1) { newLeft = fixX; } else if ( (mouseX+offX+tpWd) > winWd) { newLeft = mouseX - (tpWd + offX); } else { newLeft = mouseX + offX; } if(fixY > -1) { newTop = fixY; } else if ( (mouseY+offY+tpHt) > winHt) { newTop = winHt - (tpHt + offY); } else { newTop = mouseY + offY; } tipcss.left = (ns4) ? newLeft : String(newLeft) + 'px'; tipcss.top = (ns4) ? newTop : String(newTop) + 'px'; if (!tipFollowMouse) t1=setTimeout("tipcss.visibility='visible'",100); } function hideTip() { if (!tooltip) return; t2=setTimeout("tipcss.visibility='hidden'",100); tipOn = false; window.status = ''; }