Here's an example that uses an event listener on each div with a specified ID. When the user mousesover a certain DIV, the "popup" for that div displays. when the user mouses-out of that div, the popup goes away.
Note: this page has another feature that you probably don't need - if the user clicks on the link, the "popup" content for that DIV goes away. If you don't want users to be able to hide-by-click, remove the 3 "click" event listners (leaving only "mouseover" and "mouseout".
<script>
function AddEventListener(element, eventType, handler, capture)
{
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent("on" + eventType, handler);
}
window.onload = function()
{
AddEventListener(document.getElementById("RockySays"), "mouseover", function(e){
document.getElementById('popup1').style.display = 'inline';
document.getElementById('popup2').style.display = 'none';
document.getElementById('popup3').style.display = 'none';
}, false);
AddEventListener(document.getElementById("ArnoldSays"), "mouseover", function(e){
document.getElementById('popup1').style.display = 'none';
document.getElementById('popup2').style.display = 'inline';
document.getElementById('popup3').style.display = 'none';
}, false);
AddEventListener(document.getElementById("JJSays"), "mouseover", function(e){
document.getElementById('popup1').style.display = 'none';
document.getElementById('popup2').style.display = 'none';
document.getElementById('popup3').style.display = 'inline';
}, false);
AddEventListener(document.getElementById("RockySays"), "click", function(e){
(document.getElementById('popup1').style.display = 'inline') ? document.getElementById('popup1').style.display = 'none' : document.getElementById('popup1').style.display = 'inline';
}, false);
AddEventListener(document.getElementById("ArnoldSays"), "click", function(e){
(document.getElementById('popup2').style.display = 'inline') ? document.getElementById('popup2').style.display = 'none' : document.getElementById('popup2').style.display = 'inline';
}, false);
AddEventListener(document.getElementById("JJSays"), "click", function(e){
(document.getElementById('popup3').style.display = 'inline') ? document.getElementById('popup3').style.display = 'none' : document.getElementById('popup3').style.display = 'inline';
}, false);
AddEventListener(document.getElementById("popup1"), "mouseout", function(e){
document.getElementById('popup1').style.display = 'none';
}, false);
AddEventListener(document.getElementById("popup2"), "mouseout", function(e){
document.getElementById('popup2').style.display = 'none';
}, false);
AddEventListener(document.getElementById("popup3"), "mouseout", function(e){
document.getElementById('popup3').style.display = 'none';
}, false);
};
</script>
<style>
div {float:left;}
b {font-size:larger;}
#popup1 {display:none; border:1px solid black; overflow:auto; height:400px; width:400px;}
#popup2 {display:none; border:1px solid black; overflow:auto; height:400px; width:400px;}
#popup3 {display:none; border:1px solid black; overflow:auto; height:400px; width:400px;}
</style>
<div>
<div id="nav">
<span id="RockySays">Rocky says...</span><br/>
<span id="ArnoldSays">Arnold says...</span><br/>
<span id="JJSays">JJ says...</span><br/>
</div>
<div id="popup1">
<p><b>Yo Adrian</b></p>
<p> </p>
<p> </p>
<p><a href="">Link goes Here</a></p>
<p> </p>
<p> </p>
</div>
<div id="popup2"><b>Whatchu talkin' about Willis</b></div>
<div id="popup3"><b>Dy-no-miiiiite!</b></div>
</div>