Estou tentando desenvolver um esquema de avaliação de arquivos que estão hospedados no site do meu cliente. Cada arquivo ganha além do link de acesso uma DIV com as cinco opções de avaliação, que aparecem como estrelas em cinza. Eis o código:
<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" <?php if($s==1){ echo "style='margin-left: 5px'"; } ?> />
<?php } ?>
</div>
E o código Javascript, quando ao passar por uma estrela ela muda de cor. E ao clicar, ele avisa qual das cinco opções que você votou:
<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>
Existe algum modo prático de melhorar a função hover nesse caso? Seria mais ou menos assim:
- Passa pela estrela 5 e todas mudam de cor.
- Passa pela estrela 4 e só as estrelas 1, 2, 3 e 4 mudam de cor.
- Passa pela estrela 3 e só as estrelas 1, 2 e 3 mudam de cor.
- Passa pela estrela 2 e só as estrelas 1 e 2 mudam de cor.
- Passa pela estrela 1 e só ela muda de cor.
Porque no momento, só a respectiva estrela muda de cor quando se passa por ela. Alguém sabe?