Before reading this article, please go through the following articles:
-
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:
- Onclick
- Ondblclick
- Onmousedown
- Onmouseup
- Onmouseover
- Onmouseout
- 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
class Image_animation
{
smile()
{
var obj = <HTMLImageElement>document.getElementById("img");
obj.src = "smile.jpg";
}
cry()
{
var obj = <HTMLImageElement>document.getElementById("img");
obj.src = "cry.jpg";
}
}
window.onload = () =>
{
var greeter = new Image_animation();
var obj = <HTMLImageElement>document.getElementById("img");
obj.onmouseover = function () {
greeter.smile();
}
obj.onmouseout = function () {
greeter.cry();
}
};
Onmouseover_Onmousedown_Demo.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>TypeScript HTML App</title>
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="Onmouseover_Onmousedown.js"></script>
</head>
<body>
<h3 style="color: #0033CC">Onmouseover and Onmousedown event in TypeScript</h3>
<div id="content">
<img id="img" alt="" src="smile.jpg" />
</div>
</body>
</html>
Onmouseover_Onmousedown.js
var Image_animation = (function () {
function Image_animation() { }
Image_animation.prototype.smile = function () {
var obj = document.getElementById("img");
obj.src = "smile.jpg";
};
Image_animation.prototype.cry = function () {
var obj = document.getElementById("img");
obj.src = "cry.jpg";
};
return Image_animation;
})();
window.onload = function () {
var greeter = new Image_animation();
var obj = document.getElementById("img");
obj.onmouseover = function () {
greeter.smile();
};
obj.onmouseout = function () {
greeter.cry();
};
};
//@ sourceMappingURL=Onmouseover_Onmousedown.js.map
Output
![Animation1.gif]()