Generating a star rating automatically?

Question

I'm trying to find some way to convert a number 1 - 5 into a star rating, which can also accomodate decimals, like 4.3 or 3.34, and be very precise (like on Amazon.com). The rating doesn't have to be usable, it just has to be a static image. Any help?

I'm fine with using PHP or jQuery, whichever it needs to be.

Answer 1

You could create an image that is white with transparent star cutouts. Then place that over the top of a yellow div of a given length. Lets say your image was 100px wide. If you had a 3 star rating you would make the yellow div 100*(3/5) and 3 of the stars would be filled in.

EDIT: A similar idea. You could have an image with all 5 stars on it. Place this image within a div with overflow:hidden. Then you set the width of the div the same way as above. The smaller the div the less stars you'll see.

EDIT2: Fiddle just for fun. All the granularity you could ask for. http://jsfiddle.net/qFMyC/

Answer 2

This must be sufficient for your purpose:

http://www.fyneworks.com/jquery/star-rating/#tab-Testing