Youtube removed their rating system but most of us are disappointed about this. I will fight back and learn you how to make you own star based rating system for your website.

1. jQuery

$(function(){       
    for (i=1; i < 6; i++){
        $(".rate").append('<img src="star.gif" width="24" height="21" />');
    }
    $(".rate img").mouseover(function(){
        $(this).attr("src", "starHover.gif").addClass("active");
        $(this).prevAll().each(function(){
            $(this).attr("src", "starHover.gif").addClass("active");
        });
        $(this).nextAll().each(function(){
            $(this).attr("src", "star.gif").removeClass("active");
        });
    });
    
    $(".rate").mouseleave(function(){
        $("img", this).each(function(){
            $(this).attr("src", "star.gif").removeClass("active");
        });
    });
    
    $(".rate").one("click", function(){
        $(".rate").unbind("mouseleave");
        $(".rate img").unbind("mouseover");
        var starAmount = $(".rate img.active").length;
        alert("You voted "+starAmount+" star(s)");
    });
});

For this tutorial I chose to use a for loop to loop the images onto the page. It saves you guys time and it learns some of you how to use the for loop. More information on the for loop can be soon found at the Learn Javascript section on DevelopPhp.

$(this).attr("src", "starHover.gif").addClass("active"); = When the user hovers over a star it changes to another image. I added a class so that later on we can count how many stars the user gave.

$(this).prevAll().each(function(){ = But when the user hovers directly over the third star the previous two stars should also light up. That is what this does. Every previous element will get another src value.

$(this).nextAll().each(function(){ = But when the user first hovers over for example the fourth star but then decides to give it two stars instead, the third and fourth star have to change back to their original state. That is what that function will do.

$(".rate").mouseleave(function(){ = When the user leaves the stars span the stars will go back to their original state.

$(".rate").one("click", function(){ = .one() is a new method for you all. What it simply does is add an event handler that can only be executed once. So when the user clicks the element with a class of rate it will run this function. But when he clicks it again it will not run it again. I added this to prevent the user from voting more than once.

$(".rate").unbind("mouseleave"); = Remove the event handler mouseleave because the user has voted so we want the stars to stay the same.

$(".rate img").unbind("mouseover"); = Again, remove the event handler mouseover because we want the user to see exactly how many stars he voted even after he clicked on them.

var starAmount = $(".rate img.active").length; = This will count the amout of stars the have the class active. We added this class earlier on on the stars that were hovered over by the user.

2. CSS

.rate img {cursor: pointer;}

3. HTML

 <span class="rate"></span>

Add that span anywhere on the page and jQuery will do the rest.

On the demo page I used hearts instead of stars only because I wasn't bothered making stars.

 http://tutcenter.net/tutorialFiles/rating/