topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

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



  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
          <title>Tigra Hints Sample #2 - Graphical Hints</title>
  
          <!-- link Tigra Hints script file -->
          <script language="JavaScript" src="graphic-javascript-effect-tigra-sample2-tigra-hints.js"></script>
          <style>
                  .hintsClass {
                          background-color: white;
                          border: 1px solid #808080;
                          padding: 5px 5px 30px 5px;
                  }
          </style>
  </head>
  <body>
  <!-- at the beginning of the document's body configure and initialize the hint object -->
  <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'      : 'bctc', // 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' : 200, // a delay between initiating event (mouseover for example) and hint appearing
          'hide_delay' : 500, // a delay between closing event (mouseout for example) and hint disappearing
          'follow'     : false, // 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'    : ['revealTrans(TRANSITION=3,DURATION=.5)', 'revealTrans(TRANSITION=2,DURATION=.5)'], // [show transition, hide transition] - transition effects, only work in IE5+
          'opacity'    : 80 // opacity of the hint in %%
  };
  // text/HTML of the hints
  var HINTS_ITEMS = {
          'tt1': '<img src="img/k001.jpg" border="1" />',
          'tt2': '<img src="img/k070.jpg" border="1" />',
          'tt3': '<img src="img/k020.jpg" border="1" />'
  };
  
  var myHint = new THints (HINTS_ITEMS, HINTS_CFG);
  </script>
  <!-- 
          method show(..) displays the hint after the configurable delay;
          first parameter is the zero based numeric or string index of the hint in HINTS_ITEMS array
          second parameter is the reference to the origin element ("this" stands for the object that generates the event). the hint will try to avoid covering it, if second parameter is omited then mouse pointer is used as the origin
  -->
  <table align="center" cellpadding="0" cellspacing="0" border="0" bgcolor="black">
          <tr><td background="graphic-javascript-effect-tigra-sample2-img-film.gif" height="14"><img src="graphic-javascript-effect-tigra-sample2-img-pixel.gif" width="10" height="14" /></td></tr>
          <tr><td>
                  <img src="img/k001.jpg" width="100" onMouseOver="myHint.show('tt1', this)" onMouseOut="myHint.hide()" /> &nbsp;
                  <img src="img/k070.jpg" width="100" onMouseOver="myHint.show('tt2', this)" onMouseOut="myHint.hide()" /> &nbsp;
                  <img src="img/k020.jpg" width="100" onMouseOver="myHint.show('tt3', this)" onMouseOut="myHint.hide()" />
          </td></tr>
          <tr><td background="img/film.gif" height="14"><img src="img/pixel.gif" width="1" height="14" /></td></tr>
  </table>
  
  <p><b>Sample text to demonstrate the hints' transparency:</b> Softcomplex is US based privately owned corporation offering high quality software products and services since 2002. We're known worldwide for our popular JavaScript components as well as other web related software products.
  You've come to the right place if you need professionally implemented programming solutions for your business or hobby.
  Thousands of satisfied customers from stay-at-home moms to huge multinational companies have already benefited from our products and solutions. Hundreds are joining this community every day.</p>
  
  </body>
  </html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(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.