Post
Ask Question

Simple Animation in JavaScript

Introduction

 
Here we create a simple animation in JavaScript. When we mouseover on a particular text, it will change the image according to where the mouseover occurs.
 
AnimaJavaS1.gif
 
In this example, I prefer One, Two Three, you can choose whatever heading you prefer. In this example, we change the color and image on the onmouse over the particular heading.
  1. <table cellpadding = "0"  
  2. cellspacing = "0"  
  3. style = "width: 309px"  
  4. border = "2" >  
  5.     <tr >  
  6.     <td class = "style1" > < img id = "img1" / > < /td>  
  7.     <td >  
  8.     <table style = "width: 276px; height: 147px; margin-left: 5px" >  
  9.     <tr >  
  10.     <td id = "td1"  
  11. class = "style2"  
  12. onmouseover = "Show1()"  
  13. onmouseout = "Hide1()"  
  14.   
  15. style = "border-style: solid; border-width: 1px" > One < /td>  
  16.     </tr>  
  17.     <tr >  
  18.     <td id = "td2"  
  19. onmouseover = "Show2()"  
  20. onmouseout = "Hide2()"  
  21. class = "style2"  
  22. style = "border-style: solid; border-width: 1px" > Two < /td>  
  23.     </tr>  
  24.   <tr >  
  25.     <td id = "td3"  
  26. onmouseover = "Show3()"  
  27. onmouseout = "Hide3()"  
  28. class = "style2"  
  29. style = "border-style: solid; border-width: 1px" > Three < /td>  
  30.     </tr>   
  31.     </table> <  
  32.     /td>
  33.     </tr>  
  34.     </table>  
  35.     </div>  
  36.     </form>  
AnimaJavaS2.gif
 
In this example, there are the two functions Show2() and Hide2() of JavaScript.
 
Show2(): This function is called on the mouseover of the particular heading (here td1, td2, td3). With this, we change the color (foreground and background) of the td and change the image.
 
Hide2(): This function is called for the onmouseout event of the particular heading (here td1, td2, td3). With this, we set the default color of the heading.
 
Note: Here we take an Image Folder to store our images.
 
Now we write the JavaScript functions:
  1. <script language="javascript" type="text/javascript">  
  2.    
  3.         function Show1() {  
  4.             document.getElementById('img1').src = "Image/one.jpg";  
  5.             document.getElementById('td1').style.color = "Red";  
  6.             document.getElementById('td1').style.backgroundColor = "#FF9999";  
  7.             document.getElementById('td1').style.fontStyle = "Italic";  
  8.         }  
  9.    
  10.         function Hide1() {  
  11.             document.getElementById('td1').style.color = "Black";  
  12.             document.getElementById('td1').style.backgroundColor = "#FFFFFF";  
  13.             document.getElementById('td1').style.borderColor = "Black";  
  14.             document.getElementById('td1').style.fontStyle = "";  
  15.         }  
  16.    
  17.         function Show2() {  
  18.             document.getElementById('img1').src = "Image/two.jpg";  
  19.             document.getElementById('td2').style.color = "Red";  
  20.             document.getElementById('td2').style.backgroundColor = "#FF9999";  
  21.             document.getElementById('td2').style.fontStyle = "Italic";  
  22.         }  
  23.    
  24.         function Hide2() {  
  25.             document.getElementById('td2').style.color = "Black";  
  26.             document.getElementById('td2').style.backgroundColor = "#FFFFFF";  
  27.             document.getElementById('td2').style.borderColor = "Black";  
  28.             document.getElementById('td2').style.fontStyle = "";  
  29.         }  
  30.    
  31.         function Show3() {  
  32.             document.getElementById('img1').src = "Image/Three.png";  
  33.             document.getElementById('td3').style.color = "Red";  
  34.             document.getElementById('td3').style.backgroundColor = "#FF9999";  
  35.             document.getElementById('td3').style.fontStyle = "Italic";  
  36.         }  
  37.    
  38.         function Hide3() {  
  39.             document.getElementById('td3').style.color = "Black";  
  40.             document.getElementById('td3').style.backgroundColor = "#FFFFFF";  
  41.             document.getElementById('td3').style.borderColor = "Black";  
  42.             document.getElementById('td3').style.fontStyle = "";  
  43.         }  
Here we set the source of the Image
  1. document.getElementById('img1').src = "Image/Three.png";  
And the style of the heading
  1. document.getElementById('td3').style.color = "Red";  
  2. document.getElementById('td3').style.backgroundColor = "#FF9999";  
  3. document.getElementById('td3').style.fontStyle = "Italic";  
Complete Program
  1. <head runat="server">  
  2.     <title></title>  
  3.       <script language="javascript" type="text/javascript">  
  4.    
  5.         function Show1() {  
  6.             document.getElementById('img1').src = "Image/one.jpg";  
  7.             document.getElementById('td1').style.color = "Red";  
  8.             document.getElementById('td1').style.backgroundColor = "#FF9999";  
  9.             document.getElementById('td1').style.fontStyle = "Italic";  
  10.         }  
  11.    
  12.         function Hide1() {  
  13.             document.getElementById('td1').style.color = "Black";  
  14.             document.getElementById('td1').style.backgroundColor = "#FFFFFF";  
  15.             document.getElementById('td1').style.borderColor = "Black";  
  16.             document.getElementById('td1').style.fontStyle = "";  
  17.         }  
  18.    
  19.         function Show2() {  
  20.             document.getElementById('img1').src = "Image/two.jpg";  
  21.             document.getElementById('td2').style.color = "Red";  
  22.             document.getElementById('td2').style.backgroundColor = "#FF9999";  
  23.             document.getElementById('td2').style.fontStyle = "Italic";  
  24.         }  
  25.    
  26.         function Hide2() {  
  27.             document.getElementById('td2').style.color = "Black";  
  28.             document.getElementById('td2').style.backgroundColor = "#FFFFFF";  
  29.             document.getElementById('td2').style.borderColor = "Black";  
  30.             document.getElementById('td2').style.fontStyle = "";  
  31.         }  
  32.    
  33.         function Show3() {  
  34.             document.getElementById('img1').src = "Image/Three.png";  
  35.             document.getElementById('td3').style.color = "Red";  
  36.             document.getElementById('td3').style.backgroundColor = "#FF9999";  
  37.             document.getElementById('td3').style.fontStyle = "Italic";  
  38.         }  
  39.    
  40.         function Hide3() {  
  41.             document.getElementById('td3').style.color = "Black";  
  42.             document.getElementById('td3').style.backgroundColor = "#FFFFFF";  
  43.             document.getElementById('td3').style.borderColor = "Black";  
  44.             document.getElementById('td3').style.fontStyle = "";  
  45.    
  46.         }   
  47.     </script>  
  48.    
  49.     <style type="text/css">  
  50.         .style1  
  51.    
  52.         {  
  53.             width: 195px;  
  54.         }  
  55.   
  56.         #img1  
  57.         {  
  58.             width: 138px;  
  59.         }  
  60.    
  61.         .style2  
  62.         {  
  63.             text-align: center;  
  64.         }  
  65.     </style>  
  66. </head>  
  67.    
  68. <body style="height: 173px">  
  69.     <form id="form1" runat="server">  
  70.     <div>  
  71.     <table cellpadding="0" cellspacing="0" style="width: 309px" border="2">  
  72.    
  73.     <tr>  
  74.     <td class="style1"><img id="img1" /></td>  
  75.       <td>  
  76.     <table style="width: 276px; height: 147px; margin-left: 5px">  
  77.     <tr>  
  78.     <td id="td1" class="style2" onmouseover="Show1()"  onmouseout="Hide1()"  
  79.             style="border-style: solid; border-width: 1px">One</td>  
  80.     </tr>  
  81.     <tr>  
  82.     <td id="td2" onmouseover="Show2()"  onmouseout="Hide2()" class="style2" style="border-style: solid; border-width: 1px" >Two</td>  
  83.     </tr>  
  84.     <tr>  
  85.     <td id="td3" onmouseover="Show3()"  onmouseout="Hide3()"  class="style2" style="border-style: solid; border-width: 1px" >Three</td>  
  86.     </tr>  
  87.     </table>  
  88.     </td>  
  89.     </tr>  
  90.     </table>  
  91.     </div>  
  92.     </form>  
  93.    
  94. </body>  


Similar Articles