I want to implement star rating system in the form of three different coloured stars

I want to implement star rating system in the form of three different
coloured stars

I have implemented three star rating system based on popularity count in
my website , but now my client wants to change colour's of those three
stars to red,blue and green which shows popularity in blue colour
currently ....(wait don't assume its that simple as you thinking now.....)
, i have implemented this star rating system using "css sprite" technique
where i included two star images golden and Gray in one sprite and display
them according to logic , it works great for one colour but now i am stuck
with this problem "how to implement three colours for each star ?" , I
know this is very very confusing , following is my code which will explain
this problem better , hope somebody will help me in this , thanks in
advance ...
html: `
<div class="star-box">
<li>
<span class="stars"><?php echo $position;?></span>
</li>
</div>
`
php :
`
if( !isset($_SESSION['ranking']) || $_SESSION['ranking']['points'] <= 500 )
{
if(!isset($_SESSION['ranking']['points']) ||
$_SESSION['ranking']['points'] == ''){
//$position = '0px';
$position = 0.00;
}else{
//$position =
($_SESSION['ranking']['points']*0.28).'px';
// $position = 0.75;
$position =
($_SESSION['ranking']['points']/700);
}
$str1 = 'class="active" ';
$str1 .= '
style="background-position:'.$position.' 9px;"';
}
if( $_SESSION['ranking']['points'] > 500 &&
$_SESSION['ranking']['points'] <= 2500 )
{
if(!isset($_SESSION['ranking']['points']) ||
$_SESSION['ranking']['points'] == ''){
$position = '0px';
$position = 0.00;
}else{
//$position =
($_SESSION['ranking']['points']*0.07).'px';
//$position = 1.40;
$position =
($_SESSION['ranking']['points']/70);
}
$str2 = 'class="mid active" ';
$str2 .= '
style="background-position:'.$position.' 9px;"';
}
if( $_SESSION['ranking']['points'] > 2500 &&
$_SESSION['ranking']['points'] <= 5000 )
{
if(!isset($_SESSION['ranking']['points']) ||
$_SESSION['ranking']['points'] == ''){
$position = '0px';
$position = 0.00;
}else{
$position =
($_SESSION['ranking']['points']*0.056).'px';
$position = 2.10;
}
$str3 = 'class="last active" ';
$str3 .= '
style="background-position:'.$position.' 9px;"';
}
if( $_SESSION['ranking']['points'] > 5000 )
{
$position = '140px';
$position = 3.00;
$str3 = 'class="last active" ';
$str3 .= '
style="background-position:'.$position.' 9px;"';
}
`
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;
}