HTML and CSS Reference
In-Depth Information
EXAMPLE
14.35 (
CONTINUED
)
4
a
{ font-family: cursive;
font-size: 18pt;
font-weight: bold;
color:white;
position: absolute;
left: 60px;
}
5
img { position:absolute; top: 50px; z-index:0; }
</style>
<script type = "text/javascript">
var div1;
6
function init(){
div1=document.getElementById("divclass");
}
7
function showHideTip(e)
{
8
if(e.type == "mouseover"){
div1.style.visibility="visible";
}
9
else if(e.type == "mouseout"){
div1.style.visibility="hidden";
}
}
</script>
</head>
10 <body
onLoad="init()
;">
11 <a href="http://www.servant.xxx"
12
onMouseover="showHideTip(event);"
13
onMouseout="showHideTip(event);"
>At Your Service!
</a>
<br />
14 <img src="waiter.gif">
15
<div id="divclass">Always tip me at least 20%!</div>
</body>
</html>
EXPLANATION
1
A CSS style is defined for the ID selector,
#divclass
to create a tooltip.
2
The
visibility
property for this style is set to
hidden
; it will not be seen.
3
The
z-index
property is set to 1, putting it above the image that is set to
z-index
0. Re-
member, the higher the
z-index
number, the higher the element is placed on the stack.
4
The style for a link is defined.
5
A style for positioning an image is defined. Its
z-index
is 0, placing it below any
other elements.
Continues
