Rating system and CSS sprites - php

Question

I have implemented three star rating system based on popularity count in my website, but now my client wants to change colors of those three stars (default blue) to red, blue and green which shows the (degree of) popularity.
I've implemented this star rating system using CSS sprites, where I included two star images - golden and gray, in one sprite and displaying these using some logic. Works fine for one color, but how to implement three colours for each star?
HTML
<div class="star-box">
<li>
<span class="stars"><?php echo $position;?></span>
</li>
</div>
PHP
if( !isset($_SESSION['ranking']) || $_SESSION['ranking']['points'] <= 1000 ) {
if( !isset($_SESSION['ranking']['points']) || $_SESSION['ranking']['points'] == '' ) {
$position = '0px';
$position = 0.00;
} else {
$position = ($_SESSION['ranking']['points'] * 0.14).'px';
$position = 0.75;
}
$str1 = 'class="active" ';
$str1 .= ' style="background-position:'.$position.' 9px;"';
}
if( $_SESSION['ranking']['points'] > 1000 && $_SESSION['ranking']['points'] <= 5000 ) {
if( !isset($_SESSION['ranking']['points']) || $_SESSION['ranking']['points'] == '' ) {
$position = '0px';
$position = 0.00;
} else {
$position = ($_SESSION['ranking']['points']*0.035).'px';
$position = 1.40;
}
}
jQuery
$(function() {
$('span.stars').stars();
});
$.fn.stars = function() {
return $(this).each(function() {
// get the value
var val = parseFloat($(this).html());
// make sure that the value is in (0 - 5) range, multiply to get width
val = Math.round(val * 4) / 4;
var size = Math.max(0, (Math.min(5, val))) * 16;
// create stars holder
var $span = $('<span />').width(size);
// replace the numerical value with stars
$(this).html($span);
});
}
CSS
span.stars, span.stars span {
display: block;
background: url(../../images/stars.png) 0 -16px repeat-x;
width: 50px;
height: 20px;
text-indent: -9999px;
}
span.stars span {
background-position: 0 0;
}
SPRITE IMAGE :

Answer 1

You could use session variables etc to control your CSS directly by using a php/css file. You could set star color, sprite position, all based on logic.
Link to your css
<link rel='stylesheet' type='text/css' href='css/style.php' />
Your css/php document
<?php
header("Content-type: text/css; charset: UTF-8");
$CSSposition = $position;
?>
span.stars span {
background-position: <?php echo $CSSposition ?>;
}
Here's a link to php/css document tutorial click here

Answer 2

Check this tutorial on knockout they show how to do the star rating system which you can apply to your code http://learn.knockoutjs.com/#/?tutorial=custombindings