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-sample8-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 #8 - Delayed Images Download</title>
  
          <!-- link Tigra Hints script file -->
          <script language="JavaScript" src="graphic-javascript-effect-tigra-sample8-tigra-hints.js"></script>
          <style>
                  .hintsClass {
                          background-color: white;
                          border: 1px solid #808080;
                          padding: 5px 5px 30px 5px;
                  }
          </style>
  </head>
  <body onload="f_downloadIMages(A_IMAGES)">
  <!-- 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 %%
  };
  
  // map names to image files
  var A_IMAGES = [
          'tt1', "img/k001.jpg",
          'tt2', "img/k070.jpg",
          'tt3', "img/k020.jpg"
  ];
  
  // generate HTML of the hints from the images list (initially only put small placeholder image)
  var HINTS_ITEMS = [];
  for (var i = 0; i < A_IMAGES.length; i += 2) {
          HINTS_ITEMS[A_IMAGES[i]] = '<img src="graphic-javascript-effect-tigra-sample8-img-pixel.gif" name="im_' + A_IMAGES[i] + '" border="1" />';
  }
  
  // call this function in onload providing the images list
  function f_downloadIMages (a_imgList) {
          for (var i = 0; i < a_imgList.length; i +=2)
                  if (document.images['im_' + a_imgList[i]])
                          document.images['im_' + a_imgList[i]].src = a_imgList[i+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="img/film.gif" height="14"><img src="graphic-javascript-effect-tigra-sample8-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="graphic-javascript-effect-tigra-sample8-img-film.gif" height="14"><img src="graphic-javascript-effect-tigra-sample8-img-pixel.gif" width="1" height="14" /></td></tr>
  </table>
  
  <p><b>Sample to demonstrate delayed image download (images start loading after the rest of the page):</b> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</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.