topical media & game development

talk show tell print

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

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
  <html xmlns="" lang="en" xml:lang="en">
          <title>Tigra Hints Sample #6 - Controlling Existing Tags</title>
          <!-- link Tigra Hints script file -->
          <script language="JavaScript" src="graphic-javascript-effect-tigra-sample6-tigra-hints.js"></script>
  <!-- at the beginning of the document's body configure and initialize the hint object -->
  <script language="JavaScript">
  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'        : -10, // minimum allowed distance between the hint and the origin (negative values accepted)
          'align'      : 'brtl', // 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'        : '', // a style class name for all hints, applied to DIV element (see style section in the header of the document)
          'show_delay' : 100, // a delay between initiating event (in this case it's click) and hint appearing
          'hide_delay' : 0, // a delay between closing event (in this case it's click or form submission) and hint disappearing
          'follow'     : false, // hint follows the mouse as it moves
          'IEtrans'    : [true, true] // run transitions defined in the hint's style
  var myHint = new THints (null, HINTS_CFG);
          HTML code for the hint, make sure the hint has unique ID, it is positioned absolutely and initially invisible
          Note: Generating the HTML for the hint inside of the document ensures the indexation of the text by the search engines
  <form action="index.html" method="post" name="subscribe" onsubmit="myHint.hide(); return true;"
          id="subscrForm" style="position:absolute;z-index:1;visibility:hidden;width:250px;height:300px;padding:5px;background-color:#e0e0e0;border:1px solid gray;filter: revealTrans(TRANSITION=3,DURATION=.5) revealTrans(TRANSITION=2,DURATION=.5)">
          <p align="right">[<a href="javascript:myHint.hide();">close</a>]</p>
          <p align="center">form elements go here</p>
  <!-- End of the HTML code for the hint -->
  <!-- pass ID of the existing element as the first parameter of the show(..) method -->
  <div onclick="'subscrForm', this)" style="width: 200px; border: 1px solid #4682B4; padding: 20px; text-align: center; cursor: pointer;"> click to open the form </div>

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