topical media & game development
graphic-javascript-effect-hint-popup-effect.htm / htm
<!-- TWO STEPS TO INSTALL TIGRA HINTS:
1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document -->
<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<HEAD>
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original: support@softcomplex.com -->
<!-- Web Site: http://www.softcomplex.com -->
<style>
a, A:link, a:visited, a:active
{color: #0000aa; text-decoration: none; font-family: Tahoma, Verdana; font-size: 11px}
A:hover
{color: #ff0000; text-decoration: none; font-family: Tahoma, Verdana; font-size: 11px}
p, tr, td, ul, li
{color: #000000; font-family: Tahoma, Verdana; font-size: 11px}
.header1, h1
{color: #ffffff; background: #4682B4; font-weight: bold; font-family: Tahoma, Verdana; font-size: 13px; margin: 0px; padding: 2px;}
.header2, h2
{color: #000000; background: #DBEAF5; font-weight: bold; font-family: Tahoma, Verdana; font-size: 12px;}
.intd
{color: #000000; font-family: Tahoma, Verdana; font-size: 11px; padding-left: 15px; padding-right: 15px;}
.part
{background-image: url("img/corner.gif"); background-repeat: no-repeat; cursor: default;}
/* a class for all Tigra Hints boxes, TD object */
.hintsClass
{text-align: center; font-family: Verdana, Arial, Helvetica;}
/* this class is used by Tigra Hints wrappers */
.row
{background: white;}
</style>
<!-- Link Tigra Hints script file to your HTML document-->
<script language="JavaScript" src="graphic-javascript-effect-hint-hints.js"></script>
<!-- Link Tigra Hints configuration file to your HTML document-->
<script language="JavaScript" src="graphic-javascript-effect-hint-hints-cfg.js"></script>
</HEAD>
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
<BODY>
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original: support@softcomplex.com -->
<!-- Web Site: http://www.softcomplex.com -->
<table border="0" cellspacing="1" cellpadding="3" width="100%">
<tr><td class="header2">Pictures:</td></tr>
<tr>
<td>
<p>Full sized images that can't normally fit into your design can be shown with Tigra Hints. Check out the demo below.</p>
<table align="center" cellpadding="0" cellspacing="0" border="0" bgcolor="black">
<tr><td background="img/film.gif" height="14"><img src="img/pixel.gif" width="10" height="14"></td></tr>
<tr><td><img src="img/k001.jpg" width="100" onMouseOver="myHint.show(3)" onMouseOut="myHint.hide()"> <img src="img/k070.jpg" width="100" onMouseOver="myHint.show(4)" onMouseOut="myHint.hide()"> <img src="img/k020.jpg" width="100" onMouseOver="myHint.show(5)" 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>
<img src="img/pixel.gif" width="1" height="10" border="0"></td>
</tr>
<tr><td class="header2">Table:</td></tr>
<tr>
<td>
<p>Any HTML can be used inside Tigra Hints. This example demonstates tables containing additional contextual information nested into pop-up boxes.</p>
<table bgcolor="#4682B4" align="center" cellpadding="1" cellspacing="0" border="0">
<tr>
<td><table cellpadding="3" cellspacing="1" width="100%" border="0" align="center">
<tr><td class="header2" align="center" colspan="6">W3C DOM Compatibility - CSS</td></tr>
<tr><td class="header2" align="center"> </td>
<td class="header2" align="center" width="65">IE 5 Win</td>
<td class="header2" align="center" width="65">IE 6 Win</td>
<td class="header2" align="center" width="65">IE 5.2 Mac</td>
<td class="header2" align="center" width="65">Mozilla 1.2</td>
<td class="header2" align="center" width="65">Opera 7</td>
</tr>
<tr bgcolor="#ffffff"><td align="left"><b>Element styles</b></td>
<td align="center" onMouseOver="myHint.show(6)" onMouseOut="myHint.hide()" class="part">partially</td>
<td align="center" onMouseOver="myHint.show(6)" onMouseOut="myHint.hide()" class="part">partially</td>
<td align="center" onMouseOver="myHint.show(6)" onMouseOut="myHint.hide()" class="part">partially</td>
<td align="center" onMouseOver="myHint.show(7)" onMouseOut="myHint.hide()" class="part">partially</td>
<td align="center" onMouseOver="myHint.show(8)" onMouseOut="myHint.hide()" class="part">partially</td>
</tr>
<tr bgcolor="#ffffff"><td align="left"><b>Accessing style sheets</b></td>
<td align="center" onMouseOver="myHint.show(9)" onMouseOut="myHint.hide()" class="part">partially</td>
<td align="center" onMouseOver="myHint.show(9)" onMouseOut="myHint.hide()" class="part">partially</td>
<td align="center">yes</td>
<td align="center" onMouseOver="myHint.show(10)" onMouseOut="myHint.hide()" class="part">partially</td>
<td align="center">no</td>
</tr>
<tr bgcolor="#ffffff"><td align="left"><b>Changing style sheets</b></td>
<td align="center" onMouseOver="myHint.show(11)" onMouseOut="myHint.hide()" class="part">partially</td>
<td align="center" onMouseOver="myHint.show(11)" onMouseOut="myHint.hide()" class="part">partially</td>
<td align="center">no</td>
<td align="center" onMouseOver="myHint.show(12)" onMouseOut="myHint.hide()" class="part">partially</td>
<td align="center">no</td>
</tr>
<tr bgcolor="#ffffff"><td align="left"><b>Style sheet properties</b></td>
<td align="center">yes</td>
<td align="center">yes</td>
<td align="center">yes</td>
<td align="center">yes</td>
<td align="center">no</td>
</tr>
<tr bgcolor="#ffffff"><td align="left"><b>Miscellaneous</b></td>
<td align="center">no</td>
<td align="center" onMouseOver="myHint.show(13)" onMouseOut="myHint.hide()" class="part">partially</td>
<td align="center" onMouseOver="myHint.show(14)" onMouseOut="myHint.hide()" class="part">partially</td>
<td align="center" onMouseOver="myHint.show(15)" onMouseOut="myHint.hide()" class="part">partially</td>
<td align="center">no</td>
</tr>
</table>
</td>
</tr>
</table>
<img src="img/pixel.gif" width="1" height="10" border="0">
</td>
</tr>
<tr><td class="header2">Div element:</td></tr>
<tr>
<td>
<p>Hints can also be transparent. See the demo below.</p><b><center><div style="background-color:#4682B4;border:1px outset #DBEAF5;width:140px; padding:10px;" onMouseOver="myHint.show(16)" onMouseOut="myHint.hide()"><span class="header1">About SoftComplex</span></div></center></b>
<img src="img/pixel.gif" width="1" height="10" border="0">
</td>
</tr>
<tr><td class="header2">Links:</td></tr>
<tr>
<td><p>Fancy design ideas can be implemented with Tigra Hints.</p>
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr><td><b><li><a href="http://www.softcomplex.com/products/tigra_hints/" onMouseOver="myHint.show(0)" onMouseOut="myHint.hide()">Product page</a></b></td></tr>
<tr><td><b><li><a href="http://www.softcomplex.com/download.html" onMouseOver="myHint.show(1)" onMouseOut="myHint.hide()">Download Page</a></b></td></tr>
<tr><td><b><li><a href="http://www.softcomplex.com/products/tigra_hints/docs/" onMouseOver="myHint.show(17)" onMouseOut="myHint.hide()">Documentation</a></b></td></tr>
<tr><td><b><li><a href="http://www.softcomplex.com/forum/forumdisplay.php?fid=58" onMouseOver="myHint.show(2)" onMouseOut="myHint.hide()">Product forum</a></b></td></tr>
</table>
<img src="img/pixel.gif" width="1" height="10" border="0">
</td>
</tr>
<tr><td class="header2"> </td></tr>
</table>
</td>
</tr>
</table>
<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
<!-- Script Size: 9.07 KB -->
(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.
