<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.
<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>
Here is the example of the above 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>
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 |