CODEWITHSUNDEEP
javascriptjquery
Simon
Simon

Reputation: 5708

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.

Upvotes: 0

Views: 8338

Answers (4)

Mike Glenn
Mike Glenn

Reputation: 3510

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/

Upvotes: 0

Simon
Simon

Reputation: 5708

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

Upvotes: 3

Ben
Ben

Reputation: 3972

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

Upvotes: 0

Tatu Ulmanen
Tatu Ulmanen

Reputation: 124878

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.

Upvotes: 1

Related Questions