how can i chage the color of the stars on mouse hover in this js???

Question

I got a star rating js from http://nofunc.org/AJAX_Star_Rating/

this js works with two colors only,red and blue. When a person moves his mouse on stars then the original rating gets hidden and new rating is shown on mouse move i.e. if we move our mouse on stars then we cant see the original rating unless we move our mouse away from stars. What i want is that when a person moves his mouse then original rating should be diplayed in some light color and the one that we are doing should come in dark color(not red as its the color of fixed rating display) and once we fix it then it shud b diplayed in the same red and blue colors. How can i do that now? i tired to play with css and js but it was of no help as im not very good at it :( Help would be highly aprreciated!!

P.S. please dont suggest some big js's as I cant go for them...i need a js as small as it can be for this rating thing thats why i opted this nofunc js.....

Answer 1

try this. this is what i did for a website

html code

<div id="rating">
    <div id="star1">
        <img src="images/on.png" alt="1"/>
    </div>
    <div id="star2">
        <img src="images/on.png" alt="2"/>
    </div>
    <div id="star3">
        <img src="images/on.png" alt="3"/>
    </div>
    <div id="star4">
        <img src="images/on.png" alt="4"/>
    </div>
    <div id="star5">
        <img src="images/on.png" alt="5"/>
    </div>
</div>
<input type="hidden" name="ratingval" id="ratingval" value="0" />

js script

$(document).ready(function(){
    stars = ['off','off','off','off','off','off'];  
    clearRating();

    $('#star1 img').click(function(){ rateTheStar(1);});
    $('#star2 img').click(function(){ rateTheStar(2);});
    $('#star3 img').click(function(){ rateTheStar(3);});
    $('#star4 img').click(function(){ rateTheStar(4);});
    $('#star5 img').click(function(){ rateTheStar(5);});
});


// Bl holder functions 

function clearRating()  {
    count = 1;
    for(count = 1; count <= 5; count++) {
        strTarget = '#star'+count+' img';
        $(strTarget).animate({'opacity':0});
    }
}

function rateTheStar(targetno)  {
        if(stars[targetno] == 'off')    {

            target = '';
            i = 0;
            j = 0;

            for(j = 1; j <= targetno; j++)  {
                target = '#star'+j+' img';
                stars[j] = 'on';
                $(target).animate({'opacity':1},'slow');
            }
            document.getElementById('ratingval').value = targetno;
            for(i = targetno+1; i <= 5; i++)    {
                str = '#star'+i+' img';
                $(str).animate({'opacity':0},'slow');
            }
            //alert(stars[1]+" "+stars[2]+" "+stars[3]+" "+stars[4]+" "+stars[5]);
        }
        else if(stars[targetno] == 'on')    {
            document.getElementById('ratingval').value = targetno;
            i = 0;
            newTargetNo = targetno + 1;
            for(i = newTargetNo; i <= 5; i++)   {
                str = '#star'+i+' img';
                stars[i] = 'off';
                $(str).animate({'opacity':0},'slow');
            }
        }
    }

css file

#rating {
    width:120px;
    height:34px;
    display:inline;
    overflow:hidden;
    display:block;
}

#rating img {
    background-image:url(../images/off.png);
}


#star1  {
    width:20px;
    height:32px;
    float:left;
    background-image:url(../images/off.png);
}

#star2  {
    width:20px;
    height:32px;
    float:left;
    background-image:url(../images/off.png);
}

#star3  {
    width:20px;
    height:32px;
    float:left;
    background-image:url(../images/off.png);
}

#star4  {
    width:20px;
    height:32px;
    float:left;
    background-image:url(../images/off.png);
}

#star5  {
    width:20px;
    height:32px;
    float:left;
    background-image:url(../images/off.png);
}

images : http://thewoodhouse.net/jukebox/images/on.png and http://thewoodhouse.net/jukebox/images/off.png

you can try the code in this sample html file http://thewoodhouse.net/jukebox/admin.html

Answer 2

hello i think this tutorials will help you its a nice one http://net.tutsplus.com/tutorials/html-css-techniques/building-a-5-star-rating-system-with-jquery-ajax-and-php/