topical media & game development
graphic-javascript-effect-tigra-sample5-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 #5 - Using Wrappers For Complex HTML Hints</title>
<!-- link Tigra Hints script file -->
<script language="JavaScript" src="graphic-javascript-effect-tigra-sample5-tigra-hints.js"></script>
<style>
.hintText {
font-family: tahoma, verdana, arial;
font-size: 12px;
background-color: #FFFFCC;
color: #000000;
padding: 5px;
}
.wrapped table,
.wrapped td {
border: 0;
border-collapse: collapse;
padding: 0;
background-position: 0px;
}
</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' : -7, // 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' : 'wrapped', // 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)'], // [show transition, hide transition] - transition effects, only work in IE5+
'opacity' : 90 // opacity of the hint in %%
};
// text/HTML of the hints
var HINTS_ITEMS = [
wrap('short definition', 'img/question.gif'),
wrap('tooltip for item2 with some <b>HTML</b>', 'img/warning.gif'),
wrap('tooltip for item3', 'img/question.gif'),
wrap('tooltip for item4', 'img/warning.gif'),
wrap('tooltip with the <a href="http://www.softcomplex.com">link</a>', 'img/question.gif'),
wrap2('another wrapper'),
wrap2('this one can stretch<br />both horizontally and vertically')
];
// this custom function receives what's unique about individual hint and wraps it in the HTML template
function wrap (s_text, s_icon) {
return '<table><tr><td rowspan="2"><img src="' + s_icon + '"></td><td colspan="2"><img src="graphic-javascript-effect-tigra-sample5-img-pixel.gif" width="1" height="15" border="0"></td></tr><tr><td background="img/2.gif" height="28" nowrap>' + s_text + '</td><td><img src="graphic-javascript-effect-tigra-sample5-img-4.gif"></td></tr></table>';
}
// multiple templates/functions can be used in the same page
function wrap2 (s_text) {
return [
'<table>',
'<tr><td><img src="graphic-javascript-effect-tigra-sample5-img-corner-tl.gif" width="10" height="10" /></td><td style="background-image:url(img/side_t.gif)"></td><td><img src="graphic-javascript-effect-tigra-sample5-img-corner-tr.gif" width="10" height="10" /></td></tr>',
'<tr><td style="background-image:url(img/side_l.gif)"></td><td class="hintText">', s_text ,'</td><td style="background-image:url(img/side_r.gif)"></td></tr>',
'<tr><td><img src="graphic-javascript-effect-tigra-sample5-img-corner-bl.gif" width="10" height="10" /></td><td style="background-image:url(img/side_b.gif)"></td><td><img src="graphic-javascript-effect-tigra-sample5-img-corner-br.gif" width="10" height="10" /></td></tr>',
'</table>'
].join('');
}
var myHint = new THints (HINTS_ITEMS, HINTS_CFG);
</script>
<table width="100%" cellpadding="3" cellspacing="0" border="1" style="cursor:pointer">
<tr>
<td onmouseover="myHint.show(0, this)" onmouseout="myHint.hide()">cell 1</td>
<td onmouseover="myHint.show(1, this)" onmouseout="myHint.hide()">cell 2</td>
<td onmouseover="myHint.show(2, this)" onmouseout="myHint.hide()">cell 3</td>
<td onmouseover="myHint.show(3, this)" onmouseout="myHint.hide()">cell 4</td>
<td onmouseover="myHint.show(4, this)" onmouseout="myHint.hide()">cell 5</td>
<td onmouseover="myHint.show(5, this)" onmouseout="myHint.hide()">cell 6</td>
<td onmouseover="myHint.show(6, this)" onmouseout="myHint.hide()">cell 7</td>
</tr>
</table>
</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.