I'm trying to develop an evaluation scheme for files that are hosted on my client's website. Each file gains beyond the access link a DIV with the five rating options, which appear as gray stars. Here is the code:
<div style="margin-top: -2px">
<?php for($s=1;$s<=5;$s++){ ?>
<img id="Estrela<?php echo $s; ?>" class="starClick" onclick="javascript:vota(<?php echo $s; ?>)" src="http://meusite.com.br/star2.png"<?phpif($s==1){echo"style='margin-left: 5px'"; } ?> />
<?php } ?>
</div>
And the Javascript code, when passing by a star it changes color. And by clicking, it tells you which of the five options you voted for:
<script type="text/javascript">
$('.starClick').hover(function() {
$(this).attr('src', 'http://meusite.com.br/star1.png');
}, function() {
$(this).attr('src', 'http://meusite.com.br/star2.png');
});
function vota(val){
if(val == '1'){
alert('Você votou HORRÍVEL');
}
else if(val == '2'){
alert('Você votou RUIM');
}
else if(val == '3'){
alert('Você votou MÉDIO');
}
else if(val == '4'){
alert('Você votou BOM');
}
else if(val == '5'){
alert('Você votou ÓTIMO');
}
}
</script>
Is there any practical way to improve the hover function in this case? It would look something like this:
- Go through Star 5 and all of them change color.
- Go through star 4 and only stars 1, 2, 3 and 4 change color.
- Go through star 3 and only stars 1, 2 and 3 change color.
- Go through star 2 and only stars 1 and 2 change color.
- Go through star 1 and it only changes color.
Because at the moment, only the respective star changes color as it passes through it. Anyone know?