In Focus

Mouse Event in TypeScript: Part 2

In this article I will explain the Onmouseover and Onmouseout mouse events in TypeScript.

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

  1. Mouse Event in TypeScript: Part 1

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 on 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 on this event.

Complete Program

Onmouseover_Onmousedown.ts

  1. class Image_animation  
  2. {  
  3.     smile()  
  4.     {  
  5.         var obj = <HTMLImageElement>document.getElementById("img");  
  6.         obj.src = "smile.jpg";  
  7.     }  
  8.     cry()  
  9.     {  
  10.         var obj = <HTMLImageElement>document.getElementById("img");  
  11.         obj.src = "cry.jpg";  
  12.     }  
  13. }  
  14. window.onload = () =>  
  15. {  
  16.     var greeter = new Image_animation();  
  17.     var obj = <HTMLImageElement>document.getElementById("img");  
  18.     obj.onmouseover = function () {  
  19.         greeter.smile();  
  20.     }  
  21.     obj.onmouseout = function () {  
  22.         greeter.cry();  
  23.     }  
  24. };

Onmouseover_Onmousedown_Demo.html

  1. <!DOCTYPE html>  
  2. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>TypeScript HTML App</title>  
  6.     <link rel="stylesheet" href="app.css" type="text/css" />  
  7.     <script src="Onmouseover_Onmousedown.js"></script>  
  8. </head>  
  9. <body>  
  10.     <h3 style="color: #0033CC">Onmouseover and Onmousedown event in TypeScript</h3>  
  11.     <div id="content">  
  12.     <img id="img" alt="" src="smile.jpg" />  
  13.     </div>  
  14. </body>  
  15. </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. };  
  23. //@ sourceMappingURL=Onmouseover_Onmousedown.js.map 

Output

Animation1.gif