Question

Say I have the following png

In my HTML, coming from Ruby I get a particular value for a rating (0,1,2,3,4,5). Depending on that value I want to show a particular row of the png.

I am thinking on, depending on the value, assign a particular class, and then define that class to focus on a particular part of that png image (using some position). However, I fail to see how to do that and if that is the best way to approach this.

So in other words, if I have the following:

<span id='rating'> 3 </span> 

I was thinking on doing something like:

<span id='rating' class='rating_3'> <img ..></img></span>

Where rating_3 class would be defined to just show the row where 3 stars are bright.

How can I do that?

Thanks

Answer 1

I would use the HTML5 data-* attribute to set the specif rating value from Ruby like (the rendered html):

<span class='rating' data-rating='3.5'></span>

Then I would use a bit of javascript/jQuery to dynamically set the proper image background position (as previously suggested) of the png sprite file.

First set the css properties to the .rating selector to use the sprite image. If you want to use the big stars from your sprite, you could assign an ID to the parent container, e.g.

#rateBig .rating  {
 background-image: url('images/rating.png'); 
 background-repeat: no-repeat;
 width: 84px; 
 height: 16px;
 display: block; 
}

Notice the width: 84px; and height: 16px; values, which correspond to the size of a big stars stripe.

then suppose you have this html to match our css

<ul id="rateBig">
 <li>This line is rated 3.5 stars<br /><span class='rating' data-rating='3.5'></span></li>
</ul>

The javascript:

<script>
var dataRating, bkPos;
// function to set the backgroundPosition based on the value of the data-* attribute
// for the BIG stars
function getRateImageBig(dataRating){
 switch(dataRating){
  case 1:   bkPos =  "0 -19px";  return bkPos; break;
  case 1.5: bkPos =  "0 -38px";  return bkPos; break;
  case 2:   bkPos =  "0 -57px";  return bkPos; break;
  case 2.5: bkPos =  "0 -76px";  return bkPos; break;
  case 3:   bkPos =  "0 -95px";  return bkPos; break;
  case 3.5: bkPos =  "0 -114px"; return bkPos; break;
  case 4:   bkPos =  "0 -133px"; return bkPos; break;
  case 4.5: bkPos =  "0 -152px"; return bkPos; break;
  case 5:   bkPos =  "0 -171px"; return bkPos; break;
  default:  bkPos =  "0 0"; return bkPos;
 }
}
// go through each selector and get the value of the data-rating attribute
// call the getRateImageBig function to set the proper background position
$(document).ready(function() {
 $("#rateBig .rating").each(function(i){
  var selector = $(this);
  dataRating = selector.data("rating"); 
  getRateImageBig(dataRating);
  selector.css({"backgroundPosition": bkPos});
 }); // each
}); //  ready
</script>

Basically you could do the same for the small stars.

BTW, I used the spritecow online tool to get the correct background position of each element of the sprite.

See DEMO HERE