Mouse over & out event handler of a link to display or hide div block

We can display more detail about a link while placing mouse over the link. Here we will try to use mouse over event handler to display the div tag and mouse out event handler to hide the div tag. Each link will have one mouse over and one mouse out event handler. We will have one ( exclusive ) div tag for each link. For example when mouse is over SQL home link the div tag associated with this link is sub3 ( id=sub3 ), so the div tag sub3 will be displayed. Same way on mouse out the sub3 div tag will be hidden. This way each link will display its associated description ( div tag ) at a particular location. Here is an example of a link and its associated div tag

<a href='../sql_tutorial/site_map.php' onMouseOver="setVisibility('sub3', 'inline');" onMouseOut="setVisibility('sub3','none');">Sql  Home</a>

<div id="sub3">SQL home page</div>

The positioning of the div tag where it is to be displayed is assigned in the style sheet of the web page.

More on Div Tag DIV tag Positioning of Div OnClick & onDblClick of Div Show & Hide Div Layer Help message Layer

We will use one JavaScript function which gets trigged on mouse over and mouse out events of every link. This function receives two parameters, one is the id of the div tag and the display status. You can understand now that the only difference between mouse over and mouse out is the display status. On mouse over we will set the display status to inline and on mouse out the display status will be set to none. Here is the JavaScript code placed inside body tags.

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

Here is the example of the above code
Here is the total html code with style sheet and javascript code


<html>
<style type="text/css">
 div { 
position: absolute; 
left: 500px; 
top: 400px; 
background-color: #306080; 
width: 180px; 
padding: 10px;
color: white; 
border: #0000cc 2px  dashed; 
display: none;
} 
</style>


<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>
<body >
<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">You are going to plus2net home page</div>
<div id="sub2">Visit html home page</div>
<div id="sub3">SQL home page</div>
<div id="sub4" >You are going to visit PHP home page</div>
<div id="sub5" >JavaScript Home page</div>



</body>
</html>

Displaying link description in text blocks inside div tag using mouse over event

Subscribe