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