HTML Translucent Tooltip

2006-12-30

Here is the complete HTML for the file. Make sure you specify proper path for the Tooltip.js file. Translucency is obtained by using the ‘alpha’ filter in IE and simply setting ‘opacity’ in style for FireFox.

Move your mouse over following lines: Line One Line Two

<html>
<head>
<title>HTML Translucent Tooltip</title>
</head>
<LINK rel="stylesheet" type="text/css" href="styles/StyleSheet.css">
<script language="javascript" src="js/Tooltip.js"></script>
<body onload=init()>

<STRONG>
Move your mouse over following lines:<br><br>
<span class="ttip" onmouseover=if(t1)t1.Show(event,l1) onmouseout=if(t1)t1.Hide(event)>
Line One
</span><br>
<span class="ttip" onmouseover=if(t1)t1.Show(event,l2) onmouseout=if(t1)t1.Hide(event)>
Line Two
</span>
</STRONG>

<div id="a" style="background-color:skyblue;width: 184px; height: 49px;border: solid 1px gray; text-align: center;filter: alpha(Opacity=75);opacity:0.75">
Translucent tooltip !
</div>

</body>
<script>
var t1=null;
var l1="Tooltip for line one";
var l2="Tooltip for line two";
function init()
{
 t1 = new ToolTip("a",true,40);
}
</script>
</html>

HTML Translucent Tooltip

Move your mouse over following lines: Line One Line Two

About Me

Recents

Tag Cloud

Categories

Tags

Archives