How To Make 5 Star Rating Using Javascript

5 Star Rating

This simple script will show you how to create 5 Star Rating in JavaScript. This can be useful to know the opinion of the audience or customer of the products or services. The 5 Star Rating is very common on the internet you can see this in any sites. You can insert this source code to your Ecommerce Website.

HTML Source Code

  1. <div id="rateMe" title="Rate Me!">
  2. <a onclick="rateIt(this)" id="_1" title="Poor!" onmouseover="rating(this)" onmouseout="off(this)"></a>
  3. <a onclick="rateIt(this)" id="_2" title="Not So Hot!" onmouseover="rating(this)" onmouseout="off(this)"></a>
  4. <a onclick="rateIt(this)" id="_3" title="OK!" onmouseover="rating(this)" onmouseout="off(this)"></a>
  5. <a onclick="rateIt(this)" id="_4" title="Efficient!" onmouseover="rating(this)" onmouseout="off(this)"></a>
  6. <a onclick="rateIt(this)" id="_5" title="Very Efficient!" onmouseover="rating(this)" onmouseout="off(this)"></a>
  7. </div>
  8. <span id="rateStatus"></span>
  9. <span id="ratingSaved"></span>

CSS Style

  1. #rateMe{
  2. clear:both;
  3. margin-top:100px;
  4. }
  5. #rateMe li{
  6. float:left;
  7. list-style:none;
  8. }
  9. #rateMe li a:hover,
  10. #rateMe .on{
  11. background:url(full-star.png) no-repeat;
  12. }
  13. #rateMe a{
  14. float:left;
  15. background:url(empty-star.png) no-repeat;
  16. width:50px;
  17. height:50px;
  18. }
  19. #rateStatus{
  20. width:150px;
  21. height:50px;
  22. font:bold 20px arial;
  23. color:red;
  24. float:left;
  25. clear:both;
  26. margin-top:10px;
  27. }
  28. #ratingSaved{
  29. display:none;
  30. }
  31. .saved{
  32. color:red;
  33. }
So what can you say about this work? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you very much.

Add new comment