Geek Answers Handbook

Auto star rating?

I am trying to find a way to convert the number 1 - 5 to a star rating, which can also contain decimal numbers, like 4.3 or 3.34, and be very accurate (like on Amazon.com). The rating should not be used, it just needs to be a static image. Any help?

I'm fine using PHP or jQuery, depending on what it should be.

+4
source share
5 answers

You can create a white image with transparent star cutouts. Then place this on top of the top of the yellow div of the given length. Let's say your image was 100 pixels wide. If you had a rating of 3 stars, you would have turned yellow div 100 * (3/5) and 3 stars.

EDIT: A similar idea. You may have an image with all 5 stars on it. Put this image in a div with overflow: hidden. Then you set the width of the div in the same way as above. The smaller the div, the less stars you see.

EDIT2: The screenshot is just for fun. All the detail you could ask for. http://jsfiddle.net/qFMyC/

+4
source

This should be enough for your purpose:

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

+3
source

I wrote this many years ago. I was obsessed with not using JS. It takes some work, but I think this is exactly what you are looking for.

http://yefomit.com/internet/simple_css_rater

+2
source

I hope you want to turn the 1-5 value into an actual star performance.

It depends on how competent you are, I think that Amazon is accurate to the tenth (0.1), probably this is the server side to save on client load and use image caching; but this can be done on the client side.

@kingjiv posted a good solution on the client side, but for the server side:

If you are not too concerned about detailing, you can create 11 images of 0, 0.5, 1, 1.5, etc. and pass the value to the src attribute of the image. This will serve the right image and they will be nicely cached for reuse over and over on your pages.

If you want to be truly granular, although you can create them on the server side of the code, cache them each time you create them, ready for quick maintenance later. With this method, you could go to any degree of accuracy that has taken your imagination.

For PHP, I would recommend looking at Imagik

0
source

What I did in the past is to create 2 divs and put them on top of each other.

At the bottom of the div, you set the width equal to the width of 5 stars. So, if your star is 50 pixels wide, your bottom div is 250 pixels wide.

At the top of the div, you use the same star with a different color. Then you set the width of this div in php or javascript for 50 * $ decimalStarRating.

0
source

More articles:


All Articles