Show Hide Div with onMouseOver and onMouseOut events over link

plus2net Home
HTML Home
Sql Home
PHP Home
JavaScript Home

You are going to plus2net home page

Visit html home page

SQL home page

You are going to visit PHP home page

JavaScript Home page

Tutorial on onMouseOver & onMouseOut event DEMO: Click and on Double click event

HTML

<a href='../../index.php' onMouseOver="setVisibility('sub1', 'inline');" onMouseOut="setVisibility('sub1','none');">plus2net Home</a><br>
<a href='../index.php' onMouseOver="setVisibility('sub2', 'inline');" onMouseOut="setVisibility('sub2','none');">HTML  Home</a><br>
<a href='../../sql_tutorial/site_map.php' onMouseOver="setVisibility('sub3', 'inline');" onMouseOut="setVisibility('sub3','none');">Sql  Home</a><br>
<a href='../../php_tutorial/site_map.php' onMouseOver="setVisibility('sub4', 'inline');" onMouseOut="setVisibility('sub4','none');">PHP  Home</a><br>
<a href='../../javascript_tutorial/site_map.php' onMouseOver="setVisibility('sub5', 'inline');" onMouseOut="setVisibility('sub5','none');">JavaScript Home</a><br>


<div id="sub1" class=my_div>You are going to plus2net home page</div>
<div id="sub2" class=my_div>Visit html home page</div>
<div id="sub3" class=my_div>SQL home page</div>
<div id="sub4" class=my_div>You are going to visit PHP home page</div>
<div id="sub5" class=my_div>JavaScript Home page</div>

Style

<style>
.my_div { 
position: absolute; 
left: 500px; 
top: 100px; 
background-color: #306080; 
width: 280px; 
padding: 10px;
color: white; 
border: #0000cc 2px  dashed; 
display: none;
} 
</style>

JavaScript

<script language=\"JavaScript\">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>