amwilie
1/13/2017 - 4:07 AM

Turn number rating into stars.

Turn number rating into stars.

star-rating.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Star Rating</title>

<script>
  $.fn.stars = function() {
    return this.each(function(i,e){$(e).html($('<span/>').width($(e).text()*16));});
  };

  $('.stars').stars();
</script>

<style>
  span.stars, span.stars>* {
    display: inline-block;
    background: url(http://i.imgur.com/YsyS5y8.png) 0 -16px repeat-x;
    width: 80px;
    height: 16px;
  }
  span.stars>*{
      max-width:80px;
      background-position: 0 0;
  }
</style>

</head>
<body>
  
  Rating: <span class="stars">4</span>
    
</body>
</html>