Post
Ask Question

Mouse Event in TypeScript: Part 2

Mouse Event in TypeScript: Part 2 

 
Before reading this article, please go through the following articles:

Introduction

 
A mouse event occurs when a user moves the mouse in the user interface of an application. There are seven types of mouse events; they are:
  1. Onclick
  2. Ondblclick
  3. Onmousedown
  4. Onmouseup
  5. Onmouseover
  6. Onmouseout
  7. Onmousemove
In this article, I am describing the "Onmouseover" and "Onmouseout" mouse events in TypeScript.
 

Onmouseover

 
The onmouseover event occurs when the user moves the mouse pointer into the object. In this example, the smile.gif image is displayed in this event.
 

Onmouseout

 
The Onmouseout event occurs when the user moves the mouse pointer out of the object. In this example, the cry.gif image is displayed in this event.
 

Complete Program

 
Onmouseover_Onmousedown.ts
  1. class Image_animation {  
  2.  smile() {  
  3.   var obj = < HTMLImageElement > document.getElementById("img");  
  4.   obj.src = "smile.jpg";  
  5.  }  
  6.  cry() {  
  7.   var obj = < HTMLImageElement > document.getElementById("img");  
  8.   obj.src = "cry.jpg";  
  9.  }  
  10. }  
  11. window.onload = () => {  
  12.  var greeter = new Image_animation();  
  13.  var obj = < HTMLImageElement > document.getElementById("img");  
  14.  obj.onmouseover = function() {  
  15.   greeter.smile();  
  16.  }  
  17.  obj.onmouseout = function() {  
  18.   greeter.cry();  
  19.  }  
  20. };   
Onmouseover_Onmousedown_Demo.html
  1. <!DOCTYPE html>  
  2. <html lang="en"  
  3.     xmlns="http://www.w3.org/1999/xhtml">  
  4.     <head>  
  5.         <meta charset="utf-8" />  
  6.         <title>TypeScript HTML App</title>  
  7.         <link rel="stylesheet" href="app.css" type="text/css" />  
  8.         <script src="Onmouseover_Onmousedown.js"></script>  
  9.     </head>  
  10.     <body>  
  11.         <h3 style="color: #0033CC">Onmouseover and Onmousedown event in TypeScript</h3>  
  12.         <div id="content">  
  13.             <img id="img" alt="" src="smile.jpg" />  
  14.         </div>  
  15.     </body>  
  16. </html>     
Onmouseover_Onmousedown.js
  1. var Image_animation = (function() {  
  2.  function Image_animation() {}  
  3.  Image_animation.prototype.smile = function() {  
  4.   var obj = document.getElementById("img");  
  5.   obj.src = "smile.jpg";  
  6.  };  
  7.  Image_animation.prototype.cry = function() {  
  8.   var obj = document.getElementById("img");  
  9.   obj.src = "cry.jpg";  
  10.  };  
  11.  return Image_animation;  
  12. })();  
  13. window.onload = function() {  
  14.  var greeter = new Image_animation();  
  15.  var obj = document.getElementById("img");  
  16.  obj.onmouseover = function() {  
  17.   greeter.smile();  
  18.  };  
  19.  obj.onmouseout = function() {  
  20.   greeter.cry();  
  21.  };  
  22. };   
Output
 
Animation1.gif


Similar Articles