<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>