topical media & game development

talk show tell print

graphic-javascript-effect-tigra-sample4-index.htm / htm

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
  <html xmlns="" lang="en" xml:lang="en">
          <title>Tigra Hints Sample #4 - Follow The Mouse Mode</title>
          <!-- link Tigra Hints script file -->
          <script language="JavaScript" src="graphic-javascript-effect-tigra-sample4-tigra-hints.js"></script>
                  .hintsClass {
                          font-family: tahoma, verdana, arial;
                          font-size: 12px;
                          background-color: #f0f0f0;
                          color: #000000;
                          border: 1px solid #808080;
                          padding: 5px;
          at the beginning of the document's body configure and initialize the hint object
          all this code can be placed in the external .js file and linked in this location
  <script language="JavaScript">
  // configuration variable for the hint object, these setting will be shared among all hints created by this object
  var HINTS_CFG = {
          'wise'       : true, // don't go off screen, don't overlap the object in the document
          'margin'     : 10, // minimum allowed distance between the hint and the window edge (negative values accepted)
          'gap'        : 20, // minimum allowed distance between the hint and the origin (negative values accepted)
          'align'      : 'bctl', // align of the hint and the origin (by first letters origin's top|middle|bottom left|center|right to hint's top|middle|bottom left|center|right)
          'css'        : 'hintsClass', // a style class name for all hints, applied to DIV element (see style section in the header of the document)
          'show_delay' : 0, // a delay between initiating event (mouseover for example) and hint appearing
          'hide_delay' : 200, // a delay between closing event (mouseout for example) and hint disappearing
          'follow'     : true, // hint follows the mouse as it moves
          'z-index'    : 100, // a z-index for all hint layers
          'IEfix'      : false, // fix IE problem with windowed controls visible through hints (activate if select boxes are visible through the hints)
          'IEtrans'    : ['blendTrans(DURATION=.3)', null], // [show transition, hide transition] - nice transition effects, only work in IE5+
          'opacity'    : 90 // opacity of the hint in %%
  // text/HTML of the hints
  var HINTS_ITEMS = [
          'short definition',
          'tooltip for item2 with some <b>HTML</b>',
          'tooltip for item3<br />This one is multi line',
          'tooltip for item4',
          'tooltip for item5'
  var myHint = new THints (HINTS_ITEMS, HINTS_CFG);
  <table width="100%" cellpadding="3" cellspacing="0" border="1">
          <td onmouseover="" onmouseout="myHint.hide()">cell 1</td>
          <td onmouseover="" onmouseout="myHint.hide()">cell 2</td>
          <td onmouseover="" onmouseout="myHint.hide()">cell 3</td>
          <td onmouseover="" onmouseout="myHint.hide()">cell 4</td>
          <td onmouseover="" onmouseout="myHint.hide()">cell 5</td>

(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.