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