<html>
<head>
<title>Div example</title>
</head>
<body>
<script type="text/javascript" language="JavaScript" >
<!--
function switchDiv(id,flag) {
if (flag=="1"){
if (document.layers) {
document.layers[''+id+''].visibility = "show";
} else if (document.all) {
document.all[''+id+''].style.visibility = "visible";
} else if (document.getElementById) {
document.getElementById(''+id+'').style.visibility = "visible";
}
} else if (flag=="0"){
if (document.layers) {
document.layers[''+id+''].visibility = "hide";
} else if (document.all) {
document.all[''+id+''].style.visibility = "hidden";
} else if (document.getElementById) {
document.getElementById(''+id+'').style.visibility = "hidden";
}
}
}
//-->
</script>
<style type="text/css">
.container {
width: 500px;
height: 30px;
position: relative;
}
#link1, #link2, #link3 {
position: absolute;
font-family: Verdana,Arial,Helvetica,san-serif;
font-size: 10pt;
top: 20px;
left: 0px;
width: 200px;
visibility:hidden;
padding: 5px;
border: 1px dashed;
border-color: #0000FF;
background-color:#00FF00;
}
</style>
<div class="container">
<a href="http://www.google.com" onMouseOver="switchDiv('link1',1)" onMouseOut="switchDiv('link1',0)">Google</a> |
<a href="http://www.yahoo.com" onMouseOver="switchDiv('link2',1)" onMouseOut="switchDiv('link2',0)">Yahoo</a> |
<a href="http://www.altavista.com" onMouseOver="switchDiv('link3',1)" onMouseOut="switchDiv('link3',0)">Altavista</a>
<div id="link1">Goto google.</div>
<div id="link2">Goto yahoo.</div>
<div id="link3">Goto altavista.</div>
</div>
</body>
</html>