Rate Control in JavaScript

Here we create a Rate Control with the help of JavaScript.



Step 1: First we take three Images (Star1, Star2, Star3) of the stars in the Image Folder.


Step 2: After that we use the Image Control in our form and a label control (lblrate) to show the rating:

<img id="img1" alt=""  src="Image/Star1.png" width="20" />
<img id="img2" alt=""  src="Image/Star1.png" width="20" />
<img id="img3" alt=""  src="Image/Star1.png" width="20" />
<img id="img4" alt=""  src="Image/Star1.png" width="20" />
<img id="img5 alt=""  src="Image/Star1.png" width="20" />

<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:

Hide(): With this function we set the Default Image and set the rating according to It.

<img id="img1" onmouseover="Show1()" onmouseout="Hide1()" alt="" src="Image/Star1.png" width="20" />
<img id="img2" onmouseover="Show2()" onmouseout="Hide2()" alt="" src="Image/Star1.png" width="20" />
<img id="img3" onmouseover="Show3()" onmouseout="Hide3()" alt="" src="Image/Star1.png" width="20" />
<img id="img4" onmouseover="Show4()" onmouseout="Hide4()" alt="" src="Image/Star1.png" width="20" />
<img id="img5" onmouseover="Show5()" alt="" src="Image/Star1.png" width="20" />

Note: We set Star2 as the Image when we put mouse over on it. And we set Star1 as the Image on the onmouseout event.

<script language="javascript" type="text/javascript">
        function Show1() {
            document.getElementById('img1').src = "Image/Star2.png";
            document.getElementById('lblrate').innerHTML = "1";
        }
        function Show2() {
            document.getElementById('img1').src = "Image/Star2.png";
            document.getElementById('img2').src = "Image/Star2.png";
            document.getElementById('lblrate').innerHTML = "2";
        }
        function Show3() {
            document.getElementById('img1').src = "Image/Star2.png";
            document.getElementById('img2').src = "Image/Star2.png";
            document.getElementById('img3').src = "Image/Star2.png";
            document.getElementById('lblrate').innerHTML = "3";
        }
        function Show4() {
            document.getElementById('img1').src = "Image/Star2.png";
            document.getElementById('img2').src = "Image/Star2.png";
            document.getElementById('img3').src = "Image/Star2.png";
            document.getElementById('img4').src = "Image/Star2.png";
            document.getElementById('lblrate').innerHTML = "4";
        }

        function Show5() {
            document.getElementById('img1').src = "Image/Star2.png";
            document.getElementById('img2').src = "Image/Star2.png";
            document.getElementById('img3').src = "Image/Star2.png";
            document.getElementById('img4').src = "Image/Star2.png";
            document.getElementById('img5').src = "Image/Star2.png";
            document.getElementById('lblrate').innerHTML = "5";
        }
        function Hide1() {
            if (document.getElementById('img1').src != "Image/Star3.png") {
                document.getElementById('lblrate').innerHTML = "";
            }

            if (document.getElementById('img2').src != "Image/Star1.png") {
                document.getElementById('img2').src = "Image/Star1.png";
                document.getElementById('img1').src = "Image/Star1.png";
            }

        }
        function Hide2() {
            if (document.getElementById('img2').src != "Image/Star3.png") {
                document.getElementById('lblrate').innerHTML = "2";
            }
            if (document.getElementById('img3').src != "Image/Star1.png") {
                document.getElementById('img3').src = "Image/Star1.png";

            }
        }
        function Hide3() {
            if (document.getElementById('img3').src != "Image/Star3.png") {
                document.getElementById('lblrate').innerHTML = "3";
            }

            if (document.getElementById('img4').src != "Image/Star1.png") {
                document.getElementById('img4').src = "Image/Star1.png";

            }
        }
        function Hide4() {
            if (document.getElementById('img4').src != "Image/Star3.png") {
                document.getElementById('lblrate').innerHTML = "4";
            }
            if (document.getElementById('img5').src != "Image/Star1.png") {
                document.getElementById('img5').src = "Image/Star1.png";
               
            }

        }

</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.



    <img id="img1" onmouseover="Show1()" onclick="ShowRate1()" onmouseout="Hide1()" alt="" src="Image/Star1.png" width="20" />
    <img id="img2" onmouseover="Show2()" onclick="ShowRate2()" onmouseout="Hide2()" alt="" src="Image/Star1.png" width="20" />
    <img id="img3" onmouseover="Show3()" onclick="ShowRate3()" onmouseout="Hide3()" alt="" src="Image/Star1.png" width="20" />
    <img id="img4" onmouseover="Show4()" onclick="ShowRate4()" onmouseout="Hide4()" alt="" src="Image/Star1.png" width="20" />
    <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.

function ShowRate1() {
            document.getElementById('img1').src = "Image/Star3.png";
            document.getElementById('img2').src = "Image/Star1.png";
            document.getElementById('img3').src = "Image/Star1.png";
            document.getElementById('img4').src = "Image/Star1.png";
            document.getElementById('img5').src = "Image/Star1.png";
            document.getElementById('lblrate').innerHTML = "1";
        }
        function ShowRate2() {
            document.getElementById('img2').src = "Image/Star3.png";
            document.getElementById('img1').src = "Image/Star3.png";
            document.getElementById('img3').src = "Image/Star1.png";
            document.getElementById('img4').src = "Image/Star1.png";
            document.getElementById('img5').src = "Image/Star1.png";
            document.getElementById('lblrate').innerHTML = "2";
        }
        function ShowRate3() {
            document.getElementById('img3').src = "Image/Star3.png";
            document.getElementById('img1').src = "Image/Star3.png";
            document.getElementById('img2').src = "Image/Star3.png";
            document.getElementById('img4').src = "Image/Star1.png";
            document.getElementById('img5').src = "Image/Star1.png";
            document.getElementById('lblrate').innerHTML = "3";
        }
        function ShowRate4() {
            Show4();
            document.getElementById('img4').src = "Image/Star3.png";
            document.getElementById('img2').src = "Image/Star3.png";
            document.getElementById('img3').src = "Image/Star3.png";
            document.getElementById('img1').src = "Image/Star3.png";
            document.getElementById('img5').src = "Image/Star1.png";
            document.getElementById('lblrate').innerHTML = "4";
        }

function ShowRate5() {

            Show5();
            document.getElementById('img5').src = "Image/Star3.png";
            document.getElementById('img2').src = "Image/Star3.png";
            document.getElementById('img3').src = "Image/Star3.png";
            document.getElementById('img4').src = "Image/Star3.png";
            document.getElementById('img1').src = "Image/Star3.png";
            document.getElementById('lblrate').innerHTML = "5";
           
        }