javascript tutorial part 5

 Mouseover hide/show Elements in Javascript

So far, we have seen onclick events, let's try some mouseover effects.

We shall consider onmouseout and onmouseover.

Mouseover to hide/show an image

Complete code for form:

<html>

 <head>

 <script type='text/javascript' src='mouseover.js'></script>

 </head>

 <body>

 <form name='frm'>

 <img src='myimage.jpg'  id='mydiv'  onmouseover='Hide()' onmouseout='Show()' alt='Let's play hide and seek'/>

 </form>

 </body>

 </html>

Code explained:

onmouseover='Hide()':

• onmouseover triggers an event when mouse is hovered on image.
• Hide() function is called to hide image.

onmouseout='Show()':

• onmouseout triggers an event when mouse is no longer focused on image.
• Show() function is called to show image again.
• 
  

Javascript Functions (mouseover.js)

Hide() Function:

function Hide()

{

   document.getElementById('mydiv').style.visibility='Hidden';

}

Show() Function:

function Show()

{

    document.getElementById('mydiv').style.visibility='visible';

}