|
<style>
a.info {
position:relative;
z-index:24;
background-color:#ccc;
color:#000;
text-decoration:none
}
a.info:hover {
z-index:25;
background-color:#ff0
}
a.info span { display: none }
a.info:hover span { /*the span will display just on :hover state*/
display:block;
position:absolute;
top:2em;
left:2em;
top:2em;
border:1px solid #0cf;
background-color:#cff;
color:#000;
text-align:left
}
</style>
<SCRIPT>
var displayStatus = "Click here for more information about our Fine
Displays";
if (document.images) {
var displayOn = new Image();
displayOn.src
= "images/displayOn.gif";
}
function imgOn(imgName)
{
if (document.images)
{
document[imgName].src =
eval(imgName
+ "On").src;
//
OR document[imgName].src = "images/" + imgName + "On.gif";
}
window.status
= eval(imgName
+ "Status");
}
function imgOff(imgName)
{
if (document.images)
{
document[imgName].src =
eval(imgName
+ "Off").src;
//
OR document[imgName].src = "images/" + imgName + "Off.gif";
}
window.status =
"";
}
</SCRIPT>
<BODY>
<A CLASS="info"
refers to the assignment made within the <style>
that gives us the tooltip when we do a mouseover and
<SPAN>Click here for more
information about our Fine Displays</SPAN>
is the message within the tooltip
<A CLASS="info"
HREF="display.htm"
onMouseOver="imgOn('display');
return true;"
onMouseOut="imgOff('display')">
<SPAN>Click here for
more information about our Fine Displays</SPAN>
<IMG NAME="display"
SRC="images/displayOff.gif"
ALT="Fine Displays">
</A> |
