Star Rating System (jQuery)

Question

I guess you're familiar with the 5 stars rating system that's often used on sites to rated items? When I was looking on google, there were only jQuery plugins that are using sprites etc. How can I make a star rating system with 12 images (0,0.5,1,1.5 etc.)?

I want to do this because I've got the images and it's a lot of work to edit them.

(probably less work than adapting the code of a jQuery plugin which you don't know how it works) — Gareth, Dec 04 '10 at 13:01

score 3 · Accepted Answer · answered Dec 04 '10 at 13:48

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
function setRating(number)
{
    jQuery('#main').css('background','url(images/'+number+'-star.gif) no-repeat');       
}

function saveRating(number)
{
    jQuery('.rating').attr('onmouseout','setRating(\''+number+'\')');
    alert(number);        
}
</script>
<style>
.rating
{
    width:8px;
    height:16px;
    float:left;    
}
#main
{
    width:80px; 
    height:16px;    
}
</style>
<div id="main" style="background:url(images/1.0-star.gif) no-repeat;">
    <div class="rating" onmouseover="setRating('0.5')" onclick="saveRating('0.5');" onmouseout="setRating('1.0')"></div>
    <div class="rating" onmouseover="setRating('1.0')" onclick="saveRating('1.0');" onmouseout="setRating('1.0')"></div>
    <div class="rating" onmouseover="setRating('1.5')" onclick="saveRating('1.5');" onmouseout="setRating('1.0')"></div>
    <div class="rating" onmouseover="setRating('2.0')" onclick="saveRating('2.0');" onmouseout="setRating('1.0')"></div>
    <div class="rating" onmouseover="setRating('2.5')" onclick="saveRating('2.5');" onmouseout="setRating('1.0')"></div>
    <div class="rating" onmouseover="setRating('3.0')" onclick="saveRating('3.0');" onmouseout="setRating('1.0')"></div>
    <div class="rating" onmouseover="setRating('3.5')" onclick="saveRating('3.5');" onmouseout="setRating('1.0')"></div>
    <div class="rating" onmouseover="setRating('4.0')" onclick="saveRating('4.0');" onmouseout="setRating('1.0')"></div>
    <div class="rating" onmouseover="setRating('4.5')" onclick="saveRating('4.5');" onmouseout="setRating('1.0')"></div>
    <div class="rating" onmouseover="setRating('5.0')" onclick="saveRating('5.0');" onmouseout="setRating('1.0')"></div>
</div>

This is what I was looking for.

this is good easy solution, but how do solve the problem of images lazy loading? thanks in advance — levi, Aug 14 '12 at 09:48

score 1 · Answer 2 · edited May 23 '17 at 11:55

Did you find my old answer regarding the same issue?

Turn a number into star rating display using jQuery and CSS

The images are simple, you should have no problem converting your ready made images to that.

Also the plugin itself is very simple, and you should be able to understand its inner workings easily to adapt it to your own needs. Currently the plugin handles only showing of the stars, not actually selecting, but shouldn't be hard to convert it to such.

score 0 · Answer 3 · answered Dec 04 '10 at 13:04

0

There are plenty of sprite generators out there which will generate the css and the sprite image for you. :)

answered Dec 04 '10 at 13:04

Ben

3,922
1
22
21

score 0 · Answer 4 · answered Dec 04 '10 at 15:43

0

Nettuts has this article that might be what you are looking for:

http://net.tutsplus.com/tutorials/html-css-techniques/building-a-5-star-rating-system-with-jquery-ajax-and-php/

answered Dec 04 '10 at 15:43

Mike Glenn

3,359
1
26
33

Star Rating System (jQuery)

4 Answers4