Star Rating System (jQuery)

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.开发者_C百科

---

<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.

---

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.

---

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

---

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/