Rating with image

[toolman]

Hi there,

 

I have a rating script which displays ratings as numbers: 1, 1.5, 2, 2.5 etc up to 10.

 

I want to display star images now instead of numbers, but up to 5 instead of 10.

 

This is the code I have which outputs the numbers:

 

if ( $(relData).attr("responses") > 10 )

                                                overallRating = Ratings.RoundToHalf( ( convenience + quality + rebook )/3 );

 

How would I do this? I am not good with Javascript.

 

Alternatively, is there a way I can replace the numbers with images, for example if the rating is 5.5 i can replace it with <img src="5star.jpg" /> ?

 

Thanks!

[.josh]

If it were me, I'd look into changing how it's output from wherever it is outputting the original value.

 

But here is an example of how to do it:

 

<span class='rating'>10</span>
<span class='rating'>4.5</span>
<span class='rating'>2</span>

<script type='text/javascript'>
$(document).ready(function() {
  $('.rating').each(function() {
    var rating = Math.ceil(Number($(this).html()) / 2);
    $(this).html('<img src="'+rating+'"star.jpg" />');
  });
});
</script>