Melhorando esquema de hover pra avaliações em site

[gustalevin 0]

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?

[gabrieldarezzo 255]

Sim, eu tentaria a seguinte abordagem:

 

Colocaria um identificador numérico em cada estrela  (1 - 5)

 

E faria uma função q pinta de forma decrescente cada estrela usando exatamente como você descreveu:
- 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.

 

 

Tentai ai.

Qlq coisa da um grito ;)

[FaahWl 4]

Boa tarde!

 

Você pode pegar o índice da imagem, por exemplo.
 

Para o HTML:

<div class="estrelas">
	<img class="estrela" src="estrela_off.jpg">  
	<img class="estrela" src="estrela_off.jpg">  
	<img class="estrela" src="estrela_off.jpg">  
	<img class="estrela" src="estrela_off.jpg">  
	<img class="estrela" src="estrela_off.jpg">  
</div>

No jQuery:
 

$('.estrelas .estrela').each(function(i, e) {
  $(e).hover(function() {
    var indice = $(this).index(); 
    for(var i = 0; i < (indice + 1); i++) {
      $(this).parent().find('.estrela').eq(i).attr('src', 'estrela_on.jpg');
    }
  });
});

Ficou claro?

[gustalevin 0]

23 horas atrás, FaahWl disse:

Boa tarde!

 

Você pode pegar o índice da imagem, por exemplo.
 

Para o HTML:

<div class="estrelas">
	<img class="estrela" src="estrela_off.jpg">  
	<img class="estrela" src="estrela_off.jpg">  
	<img class="estrela" src="estrela_off.jpg">  
	<img class="estrela" src="estrela_off.jpg">  
	<img class="estrela" src="estrela_off.jpg">  
</div>

No jQuery:
 

$('.estrelas .estrela').each(function(i, e) {
  $(e).hover(function() {
    var indice = $(this).index(); 
    for(var i = 0; i < (indice + 1); i++) {
      $(this).parent().find('.estrela').eq(i).attr('src', 'estrela_on.jpg');
    }
  });
});

Ficou claro?

Vou tentar por aqui. Obrigado.