starsrating

by tomsx

HTML

<html>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <meta charset=utf-8 />
    
  </head>

  <body>

    
    Rating: <span id = "s1" class="stars">2</span>

  </body>

</html>

CSS

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

JavaScript

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





$(function() {
  $('#s1').val(4);
  $('.stars').stars();

});