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

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.

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>
Visitors Rating
Your Rating




Google+
Yaz

25-01-2012

GREAT JOB! BIG THANKS! FOR THIS IS EXTREMELY USEFULL!
dipesh

04-12-2013

It's a great site to learn.
I learn something new about <div> tag and it's become very useful to me.
Thank you

Post Comment This is for short comments only. Use the forum for more discussions.




HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2018 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer