Post
Ask Question

Event in JavaScript: Part 2

Introduction

 
In this article, you will learn about mouse events. There are seven types of mouse event; they are:
  1. Onclick
  2. 2.Ondblclick
  3. Onmousedoen
  4. Onmousemove
  5. Onmouseover
  6. Onmouseout
  7. Onmouseup
I have divided the mouse events into three parts.
 
Second  Part
 
Today you will learn OnMouseover and OnMouseout,
 
OnMouseOver
 
The mouseover event occurs when the user moves the mouse pointer into the object.
 
OnMouseout
 
The onmouseout event occurs when the user moves the mouse pointer out of the object.
 
Example
 
In the following example, I have defined two divs, maim and main2. In the main div, the text will be changed and in the main2 the image will be changed for the OnMouseover and OnMouseOut.
  1. <html>  
  2. <head>  
  3.     <style>  
  4.         body  
  5.         {  
  6.             font-family: Arial, Helvetica, sans-serif;  
  7.             font-size: 18px;  
  8.             font-weight: bold;  
  9.             background: #006699;  
  10.             text-align: center;  
  11.             color: #FFFFFF;  
  12.         }  
  13.         #main  
  14.         {  
  15.             background: red;  
  16.             height: 100px;  
  17.             width: 200px;  
  18.             padding: 55px;  
  19.         }  
  20.         #main2  
  21.         {  
  22.             background: red;  
  23.             height: 300px;  
  24.             width: 300px;  
  25.         }  
  26.     </style>  
  27.     <script type="text/javascript">  
  28.         function hover(asd) {  
  29.             asd.innerHTML = "fnish Mouseoveer"  
  30.         }  
  31.         function out(asd) {  
  32.             asd.innerHTML = "Mouseout"  
  33.         }  
  34.         function ima(x) {  
  35.             document.getElementById("img1").style.display = "block";  
  36.             document.getElementById("img2").style.display = "none";  
  37.         }  
  38.         function image(x) {  
  39.             document.getElementById("img2").style.display = "block";  
  40.             document.getElementById("img1").style.display = "none";  
  41.    
  42.         }  
  43.     </script>  
  44. </head>  
  45. <body>  
  46.     <div onmouseover="hover(this)" onmouseout="out(this)" onmouseover="out(this)" onmouseout="hover(this)"  
  47.         id="main">  
  48.         Mouseover Me</div>  
  49.     Next  
  50.     <div onmouseover="ima(this)" onmouseout="image(this)" id="main2">  
  51.         Mouseover Me  
  52.         <img src="download (1).jpg" id="img1" style="display: none" />  
  53.         <img src="download.jpg" id="img2" style="display: none" />  
  54.     </div>  
  55. </body>  
  56. </html> 
Output 
 
gandhi3.jpg
 
gandhi4.jpg
 
gandhi1.jpg
 
OnMouseout shows this image:
 
gandhi2.jpg
 
OnMouseover shows this image:


Similar Articles