Rate Control in JavaScript

Introduction

 
Here we create a Rate Control with the help of JavaScript.
 
RateCont1.gif
 
Step 1: First we take three Images (Star1, Star2, Star3) of the stars in the Image Folder.
 
RateCont2.gif
 
Step 2: After that we use the Image Control in our form and a label control (lblrate) to show the rating: 
  1. <img id="img1" alt=""  src="Image/Star1.png" width="20" />  
  2. <img id="img2" alt=""  src="Image/Star1.png" width="20" />  
  3. <img id="img3" alt=""  src="Image/Star1.png" width="20" />  
  4. <img id="img4" alt=""  src="Image/Star1.png" width="20" />  
  5. <img id="img5 alt=""  src="Image/Star1.png" width="20" />  
  6. <asp:Label ID="lblrate" runat="server"></asp:Label> 
Step 3: Now we write the JavaScript functions Show() and Hide().
 
Show(): With this function, we set the Image and Label like this:
 
RateCont3.gif
 
Hide(): With this function, we set the Default Image and set the rating according to It.
  1. <img id="img1" onmouseover="Show1()" onmouseout="Hide1()" alt="" src="Image/Star1.png" width="20" />  
  2. <img id="img2" onmouseover="Show2()" onmouseout="Hide2()" alt="" src="Image/Star1.png" width="20" />  
  3. <img id="img3" onmouseover="Show3()" onmouseout="Hide3()" alt="" src="Image/Star1.png" width="20" />  
  4. <img id="img4" onmouseover="Show4()" onmouseout="Hide4()" alt="" src="Image/Star1.png" width="20" />  
  5. <img id="img5" onmouseover="Show5()" alt="" src="Image/Star1.png" width="20" /> 
Note: We set Star2 as the Image when we put the mouse over on it. And we set Star1 as the Image on the onmouseout event.
  1. <script language="javascript" type="text/javascript">  
  2.         function Show1() {  
  3.             document.getElementById('img1').src = "Image/Star2.png";  
  4.             document.getElementById('lblrate').innerHTML = "1";  
  5.         }  
  6.         function Show2() {  
  7.             document.getElementById('img1').src = "Image/Star2.png";  
  8.             document.getElementById('img2').src = "Image/Star2.png";  
  9.             document.getElementById('lblrate').innerHTML = "2";  
  10.         }  
  11.         function Show3() {  
  12.             document.getElementById('img1').src = "Image/Star2.png";  
  13.             document.getElementById('img2').src = "Image/Star2.png";  
  14.             document.getElementById('img3').src = "Image/Star2.png";  
  15.             document.getElementById('lblrate').innerHTML = "3";  
  16.         }  
  17.         function Show4() {  
  18.             document.getElementById('img1').src = "Image/Star2.png";  
  19.             document.getElementById('img2').src = "Image/Star2.png";  
  20.             document.getElementById('img3').src = "Image/Star2.png";  
  21.             document.getElementById('img4').src = "Image/Star2.png";  
  22.             document.getElementById('lblrate').innerHTML = "4";  
  23.         }  
  24.         function Show5() {  
  25.             document.getElementById('img1').src = "Image/Star2.png";  
  26.             document.getElementById('img2').src = "Image/Star2.png";  
  27.             document.getElementById('img3').src = "Image/Star2.png";  
  28.             document.getElementById('img4').src = "Image/Star2.png";  
  29.             document.getElementById('img5').src = "Image/Star2.png";  
  30.             document.getElementById('lblrate').innerHTML = "5";  
  31.         }  
  32.         function Hide1() {  
  33.             if (document.getElementById('img1').src != "Image/Star3.png") {  
  34.                 document.getElementById('lblrate').innerHTML = "";  
  35.             }  
  36.             if (document.getElementById('img2').src != "Image/Star1.png") {  
  37.                 document.getElementById('img2').src = "Image/Star1.png";  
  38.                 document.getElementById('img1').src = "Image/Star1.png";  
  39.             }  
  40.         }  
  41.         function Hide2() {  
  42.             if (document.getElementById('img2').src != "Image/Star3.png") {  
  43.                 document.getElementById('lblrate').innerHTML = "2";  
  44.             }  
  45.             if (document.getElementById('img3').src != "Image/Star1.png") {  
  46.                 document.getElementById('img3').src = "Image/Star1.png";  
  47.             }  
  48.         }  
  49.         function Hide3() {  
  50.             if (document.getElementById('img3').src != "Image/Star3.png") {  
  51.                 document.getElementById('lblrate').innerHTML = "3";  
  52.             }  
  53.             if (document.getElementById('img4').src != "Image/Star1.png") {  
  54.                 document.getElementById('img4').src = "Image/Star1.png";  
  55.             }  
  56.         }  
  57.         function Hide4() {  
  58.             if (document.getElementById('img4').src != "Image/Star3.png") {  
  59.                 document.getElementById('lblrate').innerHTML = "4";  
  60.             }  
  61.             if (document.getElementById('img5').src != "Image/Star1.png") {  
  62.                 document.getElementById('img5').src = "Image/Star1.png";  
  63.                  
  64.             }  
  65.         }  
  66. </script> 
Note: Here we set the innerHTML property of the Label (lblrate). To display the rate according to the function.
 
Step 4: Now we write the onclick function in the JavaScript. It is useful when the user clicks on the star.
 
RateCont4.gif
 
  1. <img id="img1" onmouseover="Show1()" onclick="ShowRate1()" onmouseout="Hide1()" alt="" src="Image/Star1.png" width="20" />  
  2. <img id="img2" onmouseover="Show2()" onclick="ShowRate2()" onmouseout="Hide2()" alt="" src="Image/Star1.png" width="20" />  
  3. <img id="img3" onmouseover="Show3()" onclick="ShowRate3()" onmouseout="Hide3()" alt="" src="Image/Star1.png" width="20" />  
  4. <img id="img4" onmouseover="Show4()" onclick="ShowRate4()" onmouseout="Hide4()" alt="" src="Image/Star1.png" width="20" />  
  5. <img id="img5" onmouseover="Show5()" onclick="ShowRate5()"  alt="" src="Image/Star1.png" width="20" /> 
     
Here we use the ShowRate() function. With the help of this function, we set the Image. 
 
(Star2 to Star3) and set the Label according to the value.
  1. function ShowRate1() {  
  2.             document.getElementById('img1').src = "Image/Star3.png";  
  3.             document.getElementById('img2').src = "Image/Star1.png";  
  4.             document.getElementById('img3').src = "Image/Star1.png";  
  5.             document.getElementById('img4').src = "Image/Star1.png";  
  6.             document.getElementById('img5').src = "Image/Star1.png";  
  7.             document.getElementById('lblrate').innerHTML = "1";  
  8.         }  
  9.         function ShowRate2() {  
  10.             document.getElementById('img2').src = "Image/Star3.png";  
  11.             document.getElementById('img1').src = "Image/Star3.png";  
  12.             document.getElementById('img3').src = "Image/Star1.png";  
  13.             document.getElementById('img4').src = "Image/Star1.png";  
  14.             document.getElementById('img5').src = "Image/Star1.png";  
  15.             document.getElementById('lblrate').innerHTML = "2";  
  16.         }  
  17.         function ShowRate3() {  
  18.             document.getElementById('img3').src = "Image/Star3.png";  
  19.             document.getElementById('img1').src = "Image/Star3.png";  
  20.             document.getElementById('img2').src = "Image/Star3.png";  
  21.             document.getElementById('img4').src = "Image/Star1.png";  
  22.             document.getElementById('img5').src = "Image/Star1.png";  
  23.             document.getElementById('lblrate').innerHTML = "3";  
  24.         }  
  25.         function ShowRate4() {  
  26.             Show4();  
  27.             document.getElementById('img4').src = "Image/Star3.png";  
  28.             document.getElementById('img2').src = "Image/Star3.png";  
  29.             document.getElementById('img3').src = "Image/Star3.png";  
  30.             document.getElementById('img1').src = "Image/Star3.png";  
  31.             document.getElementById('img5').src = "Image/Star1.png";  
  32.             document.getElementById('lblrate').innerHTML = "4";  
  33.         }  
  34. function ShowRate5() {  
  35.             Show5();  
  36.             document.getElementById('img5').src = "Image/Star3.png";  
  37.             document.getElementById('img2').src = "Image/Star3.png";  
  38.             document.getElementById('img3').src = "Image/Star3.png";  
  39.             document.getElementById('img4').src = "Image/Star3.png";  
  40.             document.getElementById('img1').src = "Image/Star3.png";  
  41.             document.getElementById('lblrate').innerHTML = "5";  
  42.              
  43.         }