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.
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>