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";
  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";
  43. }