Star rating , change star on mouse over

function change_star_image(star_id){
 $("#star_rating_image_"+star_id).css('background', 'url(images/full-star.png)');
 $("#star_rating_image_"+star_id).mouseout(function(){
    $("#star_rating_image_"+star_id).css('background', 'url(images/empty-star.png)');
 });
 var endval = star_id;

for (var i=1;i<=endval;i++){
     $("#star_rating_image_"+i).css('background', 'url(images/full-star.png)');
} 
}

am working on on the questionnaire form,

i have 5 question, ans type is star rating...

The above snippet working fine , when i am going to left to right,

Assume for example . i release the mouse cursor in the 4 star,

if i come again to and if start from 2star means 开发者_运维百科, the 3rd star not going to disable mode, so as per my code, it display like

example when i start rating..

1=bright star
2=bright star
3=bright star
4=nobright star
5=nobright star

if i again start rating from 2nd star, then rating star look like

1=bright star
2=no bright star
3=bright star ======> it should go nobright star automatically , when i go the 2nd star..
4=nobright star
5=nobright star

It looks like you're not "turning off" any stars that are above the one you're currently over. I would change it to this:

var numStars = 5;
function change_star_image(star_id){
    for (var i=1;i<numStars+1;i++){
         if(i<=star_id){
              $("#star_rating_image_"+i).css('background', 'url(images/full-star.png)');
         }else{
              $("#star_rating_image_"+i).css('background', 'url(images/empty-star.png)');
         }
    }
    $("#star_rating_image_"+star_id).mouseout(clearStars());
}
function clearStars(){
    for (var i=1;i<numStars+1;i++){
         $("#star_rating_image_"+i).css('background', 'url(images/empty-star.png)');
    }
}