Message or Help layer by using Div tag by using mouseover

We can see how messages can be displayed by the side of an image or a text area by using div tag and by creating layers. This is usually done to show help messages when a user keep the mouse pointer over a help image usually an image with a question mark. This message will be displayed as long as the mouse is over the image and will be taken out once mouse is removed. This can be further changed to have a close button or a link on the message itself which on click the message box will close.

We will be using the similar code as explained in show and hide div layer by clicking buttons tutorial.

onmouse over and onmouse out event

Here is the Demo of message layer

Here is the code

<html>
<head>
<title> </title>
<style type="text/css">
div {
background-color: #f1f1f1;
width: 150px;
color: black;
border: #0000cc 2px dashed;
display: none;
}
</style>

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

</head>
<body >

<input type=button name=type value='Show Layer' onclick="setVisibility('sub3', 'inline');";><input type=button name=type value='Hide Layer' onclick="setVisibility('sub3', 'none');";>
<br><br>

You can place your mouse over this image -> <img src='graph.jpg'  onmouseout="setVisibility('sub3', 'none');" onmouseover="setVisibility('sub3', 'inline');";>
<div id="sub3" style="position: relative;   ">Message Box : </div>

<br><br><br><br>   
You can see the help menu on mouseover of this image -> <img src='graph.jpg'  onmouseover="setVisibility('sub4', 'inline');";>  
<div id="sub4" style="position: relative;" >Message Box : <a href=# onclick="setVisibility('sub4', 'none');";>Close</a></div>
</body>
</html>

Event Handling onMouseOver and onMouseOut

Subscribe to our YouTube Channel here

Help message show & Hide using div layers

Subscribe