Post
Ask Question

Image Animation In TypeScript

Introduction

 
We learn how to show an image animation on the mouse over event and out event with the help of TypeScript.
 
The following example shows an Image animation using web application in TypeScript. In this example, we use an image control and function call on its event.
 
There are two TypeScript Functions in it; they are:
  1. Image(): Display the up.gif image on the onmouseover event
  2. Imagedown(): Display the down.gif image on the onmouseout event
Let's use the following.
 
Step 1
 
Open Visual Studio 2012 and click "File" -> "New" -> "Project...". A window is opened. In this window, click "HTML Application for TypeScript" under Visual C#.
 
Give the name of your application as "Image_Animation" and then click "Ok".
 
Step 2
 
After step 1, right-click on "Image_Animation". A pop-up window is opened. Click on "Add" -> "New Item" -> "Web From". Give the name of your WebForm as "Image_Animation_Demo.aspx" and then click "Ok".
 
Step 3
 
After this session the project has been created; a new window is opened on the right side. This window is called the Solution Explorer. The Solution Explorer contains the ts file, js file, css file and aspx files, that look like this:
 
solution-explorer.gif
  

Coding

 
app.ts
  1. class Image_animation {  
  2.  Imageup() {  
  3.   var obj = < HTMLImageElement > document.getElementById("img");  
  4.   obj.src = "up.gif";  
  5.  }  
  6.  Imagedown() {  
  7.   var obj = < HTMLImageElement > document.getElementById("img");  
  8.   obj.src = "down.gif";  
  9.  }  
  10. }  
  11. window.onload = () => {  
  12.  var greeter = new Image_animation();  
  13.  var obj = < HTMLImageElement > document.getElementById("img");  
  14.  obj.onmouseover = function() {  
  15.   greeter.Imageup();  
  16.  }  
  17.  obj.onmouseout = function() {  
  18.   greeter.Imagedown();  
  19.  }  
  20. };  
Demo.aspx
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Image_Animation_Demo.aspx.cs" Inherits="Image_Animation.Image_Animation_Demo" %>  
  2.  <  
  3.  !DOCTYPE html >  
  4.  <  
  5.  html xmlns = "http://www.w3.org/1999/xhtml" >  
  6.  <  
  7.  head runat = "server" >  
  8.  <  
  9.  title > < /title>  
  10.  <  
  11.  script src = "app.js" > < /script>  
  12.  <  
  13.  /head>  
  14.  <  
  15.  body >  
  16.  <  
  17.  form id = "form1"  
  18. runat = "server" >  
  19.  <  
  20.  div >  
  21.  <  
  22.  asp: Label ID = "Label1"  
  23. runat = "server"  
  24. Font - Bold = "True"  
  25. Font - Italic = "True"  
  26. Font - Size = "X-Large"  
  27. ForeColor = "#0000CC"  
  28. Text = "Image Animation in TypeScript" > < /asp:Label>  
  29.  <  
  30.  br / >  
  31.  <  
  32.  br / >  
  33.  <  
  34.  img id = "img"  
  35. alt = ""  
  36. src = "down.gif"  
  37. style = "height: 161px; width: 165px" / > < /div>  
  38.  <  
  39.  /form>  
  40.  <  
  41.  /body>  
  42.  <  
  43.  /html>  
app.js
  1. var Greeter = (function() {  
  2.  function Greeter() {}  
  3.  Greeter.prototype.Imageup = function() {  
  4.   var obj = document.getElementById("img");  
  5.   obj.src = "up.gif";  
  6.  };  
  7.  Greeter.prototype.Imagedown = function() {  
  8.   var obj = document.getElementById("img");  
  9.   obj.src = "down.gif";  
  10.  };  
  11.  return Greeter;  
  12. })();  
  13. window.onload = function() {  
  14.  var greeter = new Greeter();  
  15.  var obj = document.getElementById("img");  
  16.  obj.onmouseover = function() {  
  17.   greeter.Imageup();  
  18.  };  
  19.  obj.onmouseout = function() {  
  20.   greeter.Imagedown();  
  21.  };  
  22. };  
Output
 
Animation2.gif
 
Referenced By
 
http://www.typescriptlang.org/


Similar Articles