[Sommaire] [Imprimer]

   1  /* This notice must be untouched at all times.
   2  
   3  wz_tooltip.js    v. 3.25
   4  
   5  The latest version is available at
   6  http://www.walterzorn.com
   7  or http://www.devira.com
   8  or http://www.walterzorn.de
   9  
  10  Copyright (c) 2002-2003 Walter Zorn. All rights reserved.
  11  Created 1. 12. 2002 by Walter Zorn (Web: http://www.walterzorn.com )
  12  Last modified: 21. 4. 2004
  13  
  14  Cross-browser tooltips working even in Opera 5 and 6,
  15  as well as in NN 4, Gecko-Browsers, IE4+, Opera 7 and Konqueror.
  16  No onmouseouts required.
  17  Appearance of tooltips can be individually configured
  18  via commands within the onmouseovers.
  19  
  20  This program is free software;
  21  you can redistribute it and/or modify it under the terms of the
  22  GNU General Public License as published by the Free Software Foundation;
  23  either version 2 of the License, or (at your option) any later version.
  24  This program is distributed in the hope that it will be useful,
  25  but WITHOUT ANY WARRANTY;
  26  without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
  27  See the GNU General Public License
  28  at http://www.gnu.org/copyleft/gpl.html for more details.
  29  */
  30  
  31  
  32  
  33  ////////////////  GLOBAL TOOPTIP CONFIGURATION  /////////////////////
  34  var ttBgColor      = 'lightyellow';
  35  var ttBgImg        = '';           // path to background image;
  36  var ttBorderColor  = '#606060';
  37  var ttBorderWidth  = 1;
  38  var ttDelay        = 500;          // time span until tooltip shows up [milliseconds]
  39  var ttFontColor    = '#000000';
  40  var ttFontFace     = 'arial,helvetica,sans-serif';
  41  var ttFontSize     = '11px';
  42  var ttFontWeight   = 'normal';     // alternative is 'bold';
  43  var ttOffsetX      = 8;            // horizontal offset of left-top corner from mousepointer
  44  var ttOffsetY      = 19;           // vertical offset                   "
  45  var ttPadding      = 3;            // spacing between border and content
  46  var ttShadowColor  = '';
  47  var ttShadowWidth  = 0;
  48  var ttTitleColor   = '#ffffff';    // color of caption text
  49  var ttWidth        = 'auto';
  50  ////////////////////  END OF TOOLTIP CONFIG  ////////////////////////
  51  
  52  
  53  
  54  //////////////  TAGS WITH TOOLTIP FUNCTIONALITY  ////////////////////
  55  // List may be extended or shortened:
  56  var tt_tags = new Array('a','area','b','big','caption','center','code','dd','div','dl','dt','em','h1','h2','h3','h4','h5','h6','i','img','input','li','map','ol','p','pre','s','small','span','strike','strong','sub','sup','table','td','th','tr','tt','u','var','ul','layer');
  57  /////////////////////////////////////////////////////////////////////
  58  
  59  
  60  
  61  ///////// DON'T CHANGE ANYTHING BELOW THIS LINE /////////////////////
  62  var tt_obj,                // current tooltip
  63  tt_objW = 0, tt_objH = 0,  // width and height of tt_obj
  64  tt_objX = 0, tt_objY = 0,
  65  tt_offX = 0, tt_offY = 0,
  66  xlim = 0, ylim = 0,        // right and bottom borders of visible client area
  67  tt_above = false,          // true if T_ABOVE cmd
  68  tt_static = false,         // tt_obj static?
  69  tt_sticky = false,         // tt_obj sticky?
  70  tt_wait = false,
  71  tt_vis = false,            // tooltip visibility flag
  72  tt_dwn = false,            // true while tooltip below mousepointer
  73  tt_u = 'undefined',
  74  tt_inputs = new Array();   // drop-down-boxes to be hidden in IE
  75  
  76  
  77  var tt_db = (document.compatMode && document.compatMode != 'BackCompat')? document.documentElement : document.body? document.body : null,
  78  tt_n = navigator.userAgent.toLowerCase();
  79  
  80  // Browser flags
  81  var tt_op = !!(window.opera && document.getElementById),
  82  tt_op6 = tt_op && !document.defaultView,
  83  tt_ie = tt_n.indexOf('msie') != -1 && document.all && tt_db && !tt_op,
  84  tt_n4 = (document.layers && typeof document.classes != "undefined"),
  85  tt_n6 = (!tt_op && document.defaultView && typeof document.defaultView.getComputedStyle != "undefined"),
  86  tt_w3c = !tt_ie && !tt_n6 && !tt_op && document.getElementById;
  87  
  88  tt_n = '';
  89  
  90  
  91  function tt_Int(t_x)
  92  {
  93      var t_y;
  94      return isNaN(t_y = parseInt(t_x))? 0 : t_y;
  95  }
  96  
  97  
  98  function wzReplace(t_x, t_y)
  99  {
 100      var t_ret = '',
 101      t_str = this,
 102      t_xI;
 103      while ((t_xI = t_str.indexOf(t_x)) != -1)
 104      {
 105          t_ret += t_str.substring(0, t_xI) + t_y;
 106          t_str = t_str.substring(t_xI + t_x.length);
 107      }
 108      return t_ret+t_str;
 109  }
 110  String.prototype.wzReplace = wzReplace;
 111  
 112  
 113  function tt_N4Tags(tagtyp, t_d, t_y)
 114  {
 115      t_d = t_d || document;
 116      t_y = t_y || new Array();
 117      var t_x = (tagtyp=='a')? t_d.links : t_d.layers;
 118      for (var z = t_x.length; z--;) t_y[t_y.length] = t_x[z];
 119      for (var z = t_d.layers.length; z--;) t_y = tt_N4Tags(tagtyp, t_d.layers[z].document, t_y);
 120      return t_y;
 121  }
 122  
 123  
 124  function tt_GetSelects()
 125  {
 126      if (!tt_op6 && !tt_ie) return;
 127      var t_s = tt_op6? 'input' : 'select';
 128      if (document.all)
 129      {
 130          var t_i = document.all.tags(t_s).length; while (t_i--)
 131              tt_inputs[t_i] = document.all.tags(t_s)[t_i];
 132      }
 133      else if (document.getElementsByTagName)
 134      {
 135          var t_i = document.getElementsByTagName(t_s).length; while (t_i--)
 136              tt_inputs[t_i] = document.getElementsByTagName(t_s)[t_i];
 137      }
 138      var t_i = tt_inputs.length; while (t_i--)
 139      {
 140          tt_inputs[t_i].x = 0;
 141          tt_inputs[t_i].y = 0;
 142          var t_o = tt_inputs[t_i];
 143          while (t_o)
 144          {
 145              tt_inputs[t_i].x += t_o.offsetLeft || 0;
 146              tt_inputs[t_i].y += t_o.offsetTop|| 0;
 147              t_o = t_o.offsetParent;
 148          }
 149      }
 150  }
 151  
 152  
 153  function tt_Htm(tt, t_id, txt)
 154  {
 155      var t_bgc = (typeof tt.T_BGCOLOR != tt_u)? tt.T_BGCOLOR : ttBgColor,
 156      t_bgimg   = (typeof tt.T_BGIMG != tt_u)? tt.T_BGIMG : ttBgImg,
 157      t_bc      = (typeof tt.T_BORDERCOLOR != tt_u)? tt.T_BORDERCOLOR : ttBorderColor,
 158      t_bw      = (typeof tt.T_BORDERWIDTH != tt_u)? tt.T_BORDERWIDTH : ttBorderWidth,
 159      t_ff      = (typeof tt.T_FONTFACE != tt_u)? tt.T_FONTFACE : ttFontFace,
 160      t_fc      = (typeof tt.T_FONTCOLOR != tt_u)? tt.T_FONTCOLOR : ttFontColor,
 161      t_fsz     = (typeof tt.T_FONTSIZE != tt_u)? tt.T_FONTSIZE : ttFontSize,
 162      t_fwght   = (typeof tt.T_FONTWEIGHT != tt_u)? tt.T_FONTWEIGHT : ttFontWeight,
 163      t_padd    = (typeof tt.T_PADDING != tt_u)? tt.T_PADDING : ttPadding,
 164      t_shc     = (typeof tt.T_SHADOWCOLOR != tt_u)? tt.T_SHADOWCOLOR : (ttShadowColor || 0),
 165      t_shw     = (typeof tt.T_SHADOWWIDTH != tt_u)? tt.T_SHADOWWIDTH : (ttShadowWidth || 0),
 166      t_tit     = (typeof tt.T_TITLE != tt_u)? tt.T_TITLE : '',
 167      t_titc    = (typeof tt.T_TITLECOLOR != tt_u)? tt.T_TITLECOLOR : ttTitleColor,
 168      t_w       = (typeof tt.T_WIDTH != tt_u)? tt.T_WIDTH  : ttWidth;
 169      if (t_shc || t_shw)
 170      {
 171          t_shc = t_shc || '#cccccc';
 172          t_shw = t_shw || 3;
 173      }
 174      if (tt_n4 && (t_fsz == '10px' || t_fsz == '11px')) t_fsz = '12px';
 175  
 176  
 177      var t_y = '<div id="' + t_id + '" style="position:absolute;z-index:1010;';
 178      t_y += 'left:0px;top:0px;width:' + (t_w+t_shw) + 'px;visibility:' + (tt_n4? 'hide' : 'hidden') + ';">';
 179      t_y += '<table border="0" cellpadding="0" cellspacing="0"' + (t_bc? (' bgcolor="' + t_bc + '"') : '') + ' width="' + t_w + '">';
 180      if (t_tit)
 181      {
 182          t_y += '<tr><td style="padding-left:3px;"><font color="' + t_titc + '" face="' + t_ff + '" ';
 183          t_y += 'style="color:' + t_titc + ';font-family:' + t_ff + ';font-size:' + t_fsz + ';"><b>';
 184          t_y += t_tit + '<\/b><\/font><\/td><\/tr>';
 185      }
 186      t_y += '<tr><td><table border="0" cellpadding="' + t_padd + '" cellspacing="' + t_bw + '" width="100%">';
 187      t_y += '<tr><td' + (t_bgc? (' bgcolor="' + t_bgc + '"') : '') + (t_bgimg? ' background="' + t_bgimg + '"' : '');
 188      if (tt_n6) t_y += ' style="padding:' + t_padd + 'px;"';
 189      t_y += '><font color="' + t_fc + '" face="' + t_ff + '"';
 190      t_y += ' style="color:' + t_fc + ';font-family:' + t_ff + ';font-size:' + t_fsz + ';font-weight:' + t_fwght + ';">';
 191      if (t_fwght == 'bold') t_y += '<b>';
 192      t_y += txt;
 193      if (t_fwght == 'bold') t_y += '<\/b>';
 194      t_y += '<\/font><\/td><\/tr><\/table><\/td><\/tr><\/table>';
 195      if (t_shw)
 196      {
 197          var t_spct = Math.round(t_shw*1.3);
 198          if (tt_n4)
 199          {
 200              t_y += '<layer bgcolor="' + t_shc + '" left="' + t_w + '" top="' + t_spct + '" width="' + t_shw + '" height="0"><\/layer>';
 201              t_y += '<layer bgcolor="' + t_shc + '" left="' + t_spct + '" align="bottom" width="' + (t_w-t_spct) + '" height="' + t_shw + '"><\/layer>';
 202          }
 203          else
 204          {
 205              var t_opa = tt_n6? '-moz-opacity:0.85;' : tt_ie? 'filter:Alpha(opacity=85);' : '';
 206              t_y += '<div id="' + t_id + 'R" style="position:absolute;background:' + t_shc + ';left:' + t_w + 'px;top:' + t_spct + 'px;width:' + t_shw + 'px;height:1px;overflow:hidden;' + t_opa + '"><\/div>';
 207              t_y += '<div style="position:relative;background:' + t_shc + ';left:' + t_spct + 'px;top:0px;width:' + (t_w-t_spct) + 'px;height:' + t_shw + 'px;overflow:hidden;' + t_opa + '"><\/div>';
 208          }
 209      }
 210      t_y += '<\/div>';
 211      return t_y;
 212  }
 213  
 214  
 215  function tt_Init()
 216  {
 217      if (!(tt_op || tt_n4 || tt_n6 || tt_ie || tt_w3c)) return;
 218  
 219      var htm = tt_n4? '<div style="position:absolute;"><\/div>' : '',
 220      tags,
 221      t_tj,
 222      over,
 223      esc = 'return escape(';
 224      var i = tt_tags.length; while (i--)
 225      {
 226          tags = tt_ie? (document.all.tags(tt_tags[i]) || 1)
 227              : document.getElementsByTagName? (document.getElementsByTagName(tt_tags[i]) || 1)
 228              : (!tt_n4 && tt_tags[i]=='a')? document.links
 229              : 1;
 230          if (tt_n4 && (tt_tags[i] == 'a' || tt_tags[i] == 'layer')) tags = tt_N4Tags(tt_tags[i]);
 231          var j = tags.length; while (j--)
 232          {
 233              if (typeof (t_tj = tags[j]).onmouseover == 'function' && t_tj.onmouseover.toString().indexOf(esc) != -1 && !tt_n6 || tt_n6 && (over = t_tj.getAttribute('onmouseover')) && over.indexOf(esc) != -1)
 234              {
 235                  if (over) t_tj.onmouseover = new Function(over);
 236                  var txt = unescape(t_tj.onmouseover());
 237                  htm += tt_Htm(
 238                      t_tj,
 239                      'tOoLtIp'+i+''+j,
 240                      txt.wzReplace('& ','&')
 241                  );
 242  
 243                  t_tj.onmouseover = new Function('e',
 244                      'tt_Show(e,'+
 245                      '"tOoLtIp' +i+''+j+ '",'+
 246                      (typeof t_tj.T_ABOVE != tt_u) + ','+
 247                      ((typeof t_tj.T_DELAY != tt_u)? t_tj.T_DELAY : ttDelay) + ','+
 248                      ((typeof t_tj.T_FIX != tt_u)? '"'+t_tj.T_FIX+'"' : '""') + ','+
 249                      (typeof t_tj.T_LEFT != tt_u) + ','+
 250                      ((typeof t_tj.T_OFFSETX != tt_u)? t_tj.T_OFFSETX : ttOffsetX) + ','+
 251                      ((typeof t_tj.T_OFFSETY != tt_u)? t_tj.T_OFFSETY : ttOffsetY) + ','+
 252                      (typeof t_tj.T_STATIC != tt_u) + ','+
 253                      (typeof t_tj.T_STICKY != tt_u) +
 254                      ');'
 255                  );
 256                  t_tj.onmouseout = tt_Hide;
 257                  if (t_tj.alt) t_tj.alt = "";
 258                  if (t_tj.title) t_tj.title = "";
 259              }
 260          }
 261      }
 262      document.write(htm);
 263  }
 264  
 265  
 266  function tt_EvX(t_e)
 267  {
 268      var t_y = tt_Int(t_e.pageX || t_e.clientX || 0) +
 269          tt_Int(tt_ie? tt_db.scrollLeft : 0) +
 270          tt_offX;
 271      if (t_y > xlim) t_y = xlim;
 272      var t_scr = tt_Int(window.pageXOffset || (tt_db? tt_db.scrollLeft : 0) || 0);
 273      if (t_y < t_scr) t_y = t_scr;
 274      return t_y;
 275  }
 276  
 277  
 278  function tt_EvY(t_e)
 279  {
 280      var t_y = tt_Int(t_e.pageY || t_e.clientY || 0) +
 281          tt_Int(tt_ie? tt_db.scrollTop : 0);
 282      if (tt_above) t_y -= (tt_objH + tt_offY - (tt_op? 31 : 15));
 283      else if (t_y > ylim || !tt_dwn && t_y > ylim-24)
 284      {
 285          t_y -= (tt_objH + 5);
 286          tt_dwn = false;
 287      }
 288      else
 289      {
 290          t_y += tt_offY;
 291          tt_dwn = true;
 292      }
 293      return t_y;
 294  }
 295  
 296  
 297  function tt_ReleasMov()
 298  {
 299      if (document.onmousemove == tt_Move)
 300      {
 301          if (document.releaseEvents) document.releaseEvents(Event.MOUSEMOVE);
 302          document.onmousemove = null;
 303      }
 304  }
 305  
 306  
 307  function tt_HideInput()
 308  {
 309      if (!(tt_ie || tt_op6) || !tt_inputs) return;
 310      var t_o;
 311      var t_i = tt_inputs.length; while (t_i--)
 312      {
 313          t_o = tt_inputs[t_i];
 314          if (tt_vis && tt_objX+tt_objW > t_o.x && tt_objX < t_o.x+t_o.offsetWidth && tt_objY+tt_objH > t_o.y && tt_objY < t_o.y+t_o.offsetHeight)
 315              t_o.style.visibility = 'hidden';
 316          else t_o.style.visibility = 'visible';
 317      }
 318  }
 319  
 320  
 321  function tt_GetDiv(t_id)
 322  {
 323      return (
 324          tt_n4? (document.layers[t_id] || null)
 325          : tt_ie? (document.all[t_id] || null)
 326          : (document.getElementById(t_id) || null)
 327      );
 328  }
 329  
 330  
 331  function tt_GetDivW()
 332  {
 333      return (
 334          tt_n4? tt_obj.clip.width
 335          : tt_obj.style.pixelWidth? tt_obj.style.pixelWidth
 336          : tt_obj.offsetWidth
 337      );
 338  }
 339  
 340  
 341  function tt_GetDivH()
 342  {
 343      return (
 344          tt_n4? tt_obj.clip.height
 345          : tt_obj.style.pixelHeight? tt_obj.style.pixelHeight
 346          : tt_obj.offsetHeight
 347      );
 348  }
 349  
 350  
 351  // Compat with DragDrop Lib: Ensure z-index of tooltip is lifted beyond toplevel dragdrop element
 352  function tt_SetDivZ()
 353  {
 354      var t_i = tt_obj.style || tt_obj;
 355      if (window.dd && dd.z)
 356          t_i.zIndex = Math.max(dd.z+1, t_i.zIndex);
 357  }
 358  
 359  
 360  function tt_SetDivPos(t_x, t_y)
 361  {
 362      var t_i = tt_obj.style || tt_obj;
 363      var t_px = (tt_op6 || tt_n4)? '' : 'px';
 364      t_i.left = (tt_objX = t_x) + t_px;
 365      t_i.top = (tt_objY = t_y) + t_px;
 366      tt_HideInput();
 367  }
 368  
 369  
 370  function tt_ShowDiv(t_x)
 371  {
 372      if (tt_n4) tt_obj.visibility = t_x? 'show' : 'hide';
 373      else tt_obj.style.visibility = t_x? 'visible' : 'hidden';
 374      tt_vis = t_x;
 375      tt_HideInput();
 376  }
 377  
 378  
 379  function tt_Show(t_e, t_id, t_above, t_delay, t_fix, t_left, t_offx, t_offy, t_static, t_sticky)
 380  {
 381      if (tt_obj) tt_Hide();
 382      var t_mf = document.onmousemove || null;
 383      if (window.dd && (window.DRAG && t_mf == DRAG || window.RESIZE && t_mf == RESIZE)) return;
 384      var t_uf = document.onmouseup || null;
 385      if (t_mf && t_uf) t_uf(t_e);
 386  
 387      tt_obj = tt_GetDiv(t_id);
 388      if (tt_obj)
 389      {
 390          tt_dwn = !(tt_above = t_above);
 391          tt_static = t_static;
 392          tt_sticky = t_sticky;
 393          tt_objW = tt_GetDivW();
 394          tt_objH = tt_GetDivH();
 395          tt_offX = t_left? -(tt_objW+t_offx) : t_offx;
 396          tt_offY = t_offy;
 397          if (tt_op) tt_offY += 21;
 398          if (tt_n4)
 399          {
 400              if (tt_obj.document.layers.length)
 401              {
 402                  var t_sh = tt_obj.document.layers[0];
 403                  t_sh.clip.height = tt_objH - Math.round(t_sh.clip.width*1.3);
 404              }
 405          }
 406          else
 407          {
 408              var t_sh = tt_GetDiv(t_id+'R');
 409              if (t_sh)
 410              {
 411                  var t_h = tt_objH - tt_Int(t_sh.style.pixelTop || t_sh.style.top || 0);
 412                  if (typeof t_sh.style.pixelHeight != tt_u) t_sh.style.pixelHeight = t_h;
 413                  else t_sh.style.height = t_h + 'px';
 414              }
 415          }
 416  
 417          tt_GetSelects();
 418  
 419          xlim = tt_Int((tt_db && tt_db.clientWidth)? tt_db.clientWidth : window.innerWidth) +
 420              tt_Int(window.pageXOffset || (tt_db? tt_db.scrollLeft : 0) || 0) -
 421              tt_objW -
 422              (tt_n4? 21 : 0);
 423          ylim = tt_Int(window.innerHeight || tt_db.clientHeight) +
 424              tt_Int(window.pageYOffset || (tt_db? tt_db.scrollTop : 0) || 0) -
 425              tt_objH - tt_offY;
 426  
 427          tt_SetDivZ();
 428          t_e = t_e || window.event;
 429          if (t_fix) tt_SetDivPos(tt_Int((t_fix = t_fix.split(','))[0]), tt_Int(t_fix[1]));
 430          else tt_SetDivPos(tt_EvX(t_e), tt_EvY(t_e));
 431  
 432          window.tt_rdl = window.setTimeout(
 433              'if (tt_sticky)'+
 434              '{'+
 435                  'tt_ReleasMov();'+
 436                  'window.tt_upFunc = document.onmouseup || null;'+
 437                  'if (document.captureEvents) document.captureEvents(Event.MOUSEUP);'+
 438                  'document.onmouseup = new Function("window.setTimeout(\'tt_Hide();\', 10);");'+
 439              '}'+
 440              'else if (tt_static) tt_ReleasMov();'+
 441              'tt_ShowDiv(\'true\');',
 442              t_delay
 443          );
 444  
 445          if (!t_fix)
 446          {
 447              if (document.captureEvents) document.captureEvents(Event.MOUSEMOVE);
 448              document.onmousemove = tt_Move;
 449          }
 450      }
 451  }
 452  
 453  
 454  var tt_area = false;
 455  function tt_Move(t_ev)
 456  {
 457      if (!tt_obj) return;
 458      if (tt_n6 || tt_w3c)
 459      {
 460          if (tt_wait) return;
 461          tt_wait = true;
 462          setTimeout('tt_wait = false;', 5);
 463      }
 464      var t_e = t_ev || window.event;
 465      tt_SetDivPos(tt_EvX(t_e), tt_EvY(t_e));
 466      if (tt_op6)
 467      {
 468          if (tt_area && t_e.target.tagName != 'AREA') tt_Hide();
 469          else if (t_e.target.tagName == 'AREA') tt_area = true;
 470      }
 471  }
 472  
 473  
 474  function tt_Hide()
 475  {
 476      if (window.tt_obj)
 477      {
 478          if (window.tt_rdl) window.clearTimeout(tt_rdl);
 479          if (!tt_sticky || tt_sticky && !tt_vis)
 480          {
 481              tt_ShowDiv(false);
 482              tt_SetDivPos(-tt_objW, -tt_objH);
 483              tt_obj = null;
 484              if (typeof window.tt_upFunc != tt_u) document.onmouseup = window.tt_upFunc;
 485          }
 486          tt_sticky = false;
 487          if (tt_op6 && tt_area) tt_area = false;
 488          tt_ReleasMov();
 489          tt_HideInput();
 490      }
 491  }
 492  
 493  
 494  tt_Init();
 495