A catholic in dialogue

Image and Description Tooltip

One of the more useful tooltip scripts that can be used in a presentation-tutorial website like Your Daily Inspiration and the Bible Workshop is the "Image with Description Tooltip" by Sharon Paine. There are two parts in the script: the first is placed at the <head> section of the web page, and another is in the <body> where the links to the images are.

Here is the script for the <head>

   1: <script type="text/javascript">
   1:  
   2:  
   3: /***********************************************
   4: * Image w/ description tooltip- By Dynamic Web Coding (www.dyn-web.com)
   5: * Copyright 2002-2007 by Sharon Paine
   6: * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
   7: ***********************************************/
   8:  
   9: /* IMPORTANT: Put script after tooltip div or 
  10:      put tooltip div just before </BODY>. */
  11:  
  12: var dom = (document.getElementById) ? true : false;
  13: var ns5 = (!document.all && dom || window.opera) ? true: false;
  14: var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
  15: var ie4 = (document.all && !dom) ? true : false;
  16: var nodyn = (!ns5 && !ie4 && !ie5 && !dom) ? true : false;
  17:  
  18: var origWidth, origHeight;
  19:  
  20: // avoid error of passing event object in older browsers
  21: if (nodyn) { event = "nope" }
  22:  
  23: ///////////////////////  CUSTOMIZE HERE   ////////////////////
  24: // settings for tooltip 
  25: // Do you want tip to move when mouse moves over link?
  26: var tipFollowMouse= true;    
  27: // Be sure to set tipWidth wide enough for widest image
  28: var tipWidth= 160;
  29: var offX= 20;    // how far from mouse to show tip
  30: var offY= 12; 
  31: var tipFontFamily= "Verdana, arial, helvetica, sans-serif";
  32: var tipFontSize= "8pt";
  33: // set default text color and background color for tooltip here
  34: // individual tooltips can have their own (set in messages arrays)
  35: // but don’t have to
  36: var tipFontColor= "#000000";
  37: var tipBgColor= "#DDECFF"; 
  38: var tipBorderColor= "#000080";
  39: var tipBorderWidth= 3;
  40: var tipBorderStyle= "ridge";
  41: var tipPadding= 4;
  42:  
  43: // tooltip content goes here (image, description, optional bgColor, optional textcolor)
  44: var messages = new Array();
  45: // multi-dimensional arrays containing: 
  46: // image and text for tooltip
  47: // optional: bgColor and color to be sent to tooltip
  48: messages[0] = new Array(‘http://img.photobucket.com/albums/v86/angfrayle/piceph4_32-5_9-sec1.png’,‘Section 1′,"#FFFFFF");
  49: messages[1] = new Array(‘http://img.photobucket.com/albums/v86/angfrayle/piceph4_32-5_9-sec2.png’,’section 2′,"#DDECFF");
  50: messages[2] = new Array(‘http://img.photobucket.com/albums/v86/angfrayle/piceph4_32-5_9-sec3.png’,‘Section 3′,‘black’,‘white’);
  51:  
  52: ////////////////////  END OF CUSTOMIZATION AREA  ///////////////////
  53:  
  54: // preload images that are to appear in tooltip
  55: // from arrays above
  56: if (document.images) {
  57:     var theImgs = new Array();
  58:     for (var i=0; i<messages.length; i++) {
  59:       theImgs[i] = new Image();
  60:         theImgs[i].src = messages[i][0];
  61:   }
  62: }
  63:  
  64: // to layout image and text, 2-row table, image centered in top cell
  65: // these go in var tip in doTooltip function
  66: // startStr goes before image, midStr goes between image and text
  67: var startStr = ‘<table width="’ + tipWidth + ‘"><tr><td align="center" width="100%"><img src="’;
  68: var midStr = ‘" border="0"></td></tr><tr><td valign="top">’;
  69: var endStr = ‘</td></tr></table>’;
  70:  
  71: ////////////////////////////////////////////////////////////
  72: //  initTip    - initialization for tooltip.
  73: //        Global variables for tooltip. 
  74: //        Set styles
  75: //        Set up mousemove capture if tipFollowMouse set true.
  76: ////////////////////////////////////////////////////////////
  77: var tooltip, tipcss;
  78: function initTip() {
  79:     if (nodyn) return;
  80:     tooltip = (ie4)? document.all[‘tipDiv’]: (ie5||ns5)? document.getElementById(‘tipDiv’): null;
  81:     tipcss = tooltip.style;
  82:     if (ie4||ie5||ns5) {    // ns4 would lose all this on rewrites
  83:         tipcss.width = tipWidth+"px";
  84:         tipcss.fontFamily = tipFontFamily;
  85:         tipcss.fontSize = tipFontSize;
  86:         tipcss.color = tipFontColor;
  87:         tipcss.backgroundColor = tipBgColor;
  88:         tipcss.borderColor = tipBorderColor;
  89:         tipcss.borderWidth = tipBorderWidth+"px";
  90:         tipcss.padding = tipPadding+"px";
  91:         tipcss.borderStyle = tipBorderStyle;
  92:     }
  93:     if (tooltip&&tipFollowMouse) {
  94:         document.onmousemove = trackMouse;
  95:     }
  96: }
  97:  
  98: window.onload = initTip;
  99:  
 100: /////////////////////////////////////////////////
 101: //  doTooltip function
 102: //            Assembles content for tooltip and writes 
 103: //            it to tipDiv
 104: /////////////////////////////////////////////////
 105: var t1,t2;    // for setTimeouts
 106: var tipOn = false;    // check if over tooltip link
 107: function doTooltip(evt,num) {
 108:     if (!tooltip) return;
 109:     if (t1) clearTimeout(t1);    if (t2) clearTimeout(t2);
 110:     tipOn = true;
 111:     // set colors if included in messages array
 112:     if (messages[num][2])    var curBgColor = messages[num][2];
 113:     else curBgColor = tipBgColor;
 114:     if (messages[num][3])    var curFontColor = messages[num][3];
 115:     else curFontColor = tipFontColor;
 116:     if (ie4||ie5||ns5) {
 117:         var tip = startStr + messages[num][0] + midStr + ‘<span style="font-family:’ + tipFontFamily + ‘; font-size:’ + tipFontSize + ‘; color:’ + curFontColor + ‘;">’ + messages[num][1] + ‘</span>’ + endStr;
 118:         tipcss.backgroundColor = curBgColor;
 119:          tooltip.innerHTML = tip;
 120:     }
 121:     if (!tipFollowMouse) positionTip(evt);
 122:     else t1=setTimeout("tipcss.visibility=’visible’",100);
 123: }
 124:  
 125: var mouseX, mouseY;
 126: function trackMouse(evt) {
 127:     standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
 128:     mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
 129:     mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
 130:     if (tipOn) positionTip(evt);
 131: }
 132:  
 133: /////////////////////////////////////////////////////////////
 134: //  positionTip function
 135: //        If tipFollowMouse set false, so trackMouse function
 136: //        not being used, get position of mouseover event.
 137: //        Calculations use mouseover event position, 
 138: //        offset amounts and tooltip width to position
 139: //        tooltip within window.
 140: /////////////////////////////////////////////////////////////
 141: function positionTip(evt) {
 142:     if (!tipFollowMouse) {
 143:         standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
 144:         mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
 145:         mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
 146:     }
 147:     // tooltip width and height
 148:     var tpWd = (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth;
 149:     var tpHt = (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight;
 150:     // document area in view (subtract scrollbar width for ns)
 151:     var winWd = (ns5)? window.innerWidth-20+window.pageXOffset: standardbody.clientWidth+standardbody.scrollLeft;
 152:     var winHt = (ns5)? window.innerHeight-20+window.pageYOffset: standardbody.clientHeight+standardbody.scrollTop;
 153:     // check mouse position against tip and window dimensions
 154:     // and position the tooltip 
 155:     if ((mouseX+offX+tpWd)>winWd) 
 156:         tipcss.left = mouseX-(tpWd+offX)+"px";
 157:     else tipcss.left = mouseX+offX+"px";
 158:     if ((mouseY+offY+tpHt)>winHt) 
 159:         tipcss.top = winHt-(tpHt+offY)+"px";
 160:     else tipcss.top = mouseY+offY+"px";
 161:     if (!tipFollowMouse) t1=setTimeout("tipcss.visibility=’visible’",100);
 162: }
 163:  
 164: function hideTip() {
 165:     if (!tooltip) return;
 166:     t2=setTimeout("tipcss.visibility=’hidden’",100);
 167:     tipOn = false;
 168: }
 169:  
 170: document.write(‘<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>’)
 171:  

</script>

The customizable part of this script is marked with a comment. The more important part to customize is where one finds the following codes:

   1: messages[0] = new Array(’url-to-image’,'Section 1′,"#FFFFFF");
   2: messages[1] = new Array(’url-to-image’,’section 2′,"#DDECFF");
   3: messages[2] = new Array(’url-to-image’,'Section 3′,’black’,'white’);

The second part of the script — the one in the body of the webpage — is the normal IMG tag with the the AHREF. This latter should have the following special codes for the mouseover and mouseout events that are important for running the script:

onmouseover="doTooltip(event,0)" onmouseout="hideTip()"

In the case of the page one finds here, an image map has been used. What happens is here is that by running the mouse over the sectioned graphics, a larger view of the reduced sectional graphic is displayed.


Tagged as: ,


Recent Comments
Blog Roll