topical media & game development
graphic-javascript-effect-tigra-sample1-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 #1 - Simple Text Hints</title>
<!-- link Tigra Hints script file -->
<script language="JavaScript" src="graphic-javascript-effect-tigra-sample1-tigra-hints.js"></script>
<style>
.hintsClass {
font-family: tahoma, verdana, arial;
font-size: 12px;
background-color: #f0f0f0;
color: #000000;
border: 1px solid #808080;
padding: 5px;
}
.hintSource {
color: green;
text-decoration: underline;
cursor: pointer;
}
</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' : 0, // minimum allowed distance between the hint and the origin (negative values accepted)
'align' : 'tcbc', // 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' : ['blendTrans(DURATION=.3)', 'blendTrans(DURATION=.3)'], // [show transition, hide transition] - nice transition effects, only work in IE5+
'opacity' : 100 // 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',
'another sample tooltip with the <a href="http://www.softcomplex.com">link</a>'
];
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
-->
<p style="margin-top:50px;">We believe in the <span class="hintSource" onmouseover="myHint.show(0, this)" onmouseout="myHint.hide()">Internet</span> community and we dedicate ourselves to providing the best value to <span class="hintSource" onmouseover="myHint.show(1, this)" onmouseout="myHint.hide()">people</span>. We don't work for the profit; our commercial <span class="hintSource" onmouseover="myHint.show(2, this)" onmouseout="myHint.hide()">products</span> are the source of funding for <span class="hintSource" onmouseover="myHint.show(3, this)" onmouseout="myHint.hide()">development</span> and promotion of our free <span class="hintSource" onmouseover="myHint.show(4, this)" onmouseout="myHint.hide()">software</span>. More we get, more we give back.</p>
</body>
</html>
(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.
