Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Dee

Classificação Estrelas

Por , em Javascript

Recommended Posts

Dee    0

Dee
Postado

Galera.

Eu tenho uma página de Downloads aqui e quero que quando o usuário fizesse o download, desse uma nota ou classificação para o programa.

Enfim.

 

Tenho duas imagens aqui, uma estrela vazia e outra cheia.

Eu usei a função de Rollover do DreamWeaver para que quando passasse o mouse por cima da estrela vazia, mostrasse a cheia no lugar.

Eu quero que quando eu passar o mouse em cima da segunda estrela, preenchesse a primeira também, e quando passar na terceira, preenchesse a primeira e a segunda também, e assim também com a outras.

 

Eu até consegui fazer.

Mas quando eu tiro o mouse de cima das estrelas elas continuam preenchidas, menos a primeira.

Eu estou postando aqui em JavaScript, porquê a função que o DreamWeaver cria é em JavaScript.

 

 

Alguém pode me ajudar ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

Fiz uma função aqui, bem rápido, apenas para você ter uma idéia.

 

Pode ser feito de outras maneiras também, mas tudo segue a mesma lógica de funcionamento:

 

Estrela vazia: star_b.gif

Estrela preenchida: star_p.gif

<html>
	<head>
		<title>iMasters Fóruns - JavaScript</title>
	</head> 
<body>
<script type="text/javascript">
function estrelas(el) {
if (el==0) {
	for (var i=1; i<=5; i++) {
	var objEstrela = document.getElementById("star"+i);
	objEstrela.src = "star_b.gif";
	}
}else{
	for (var i=1; i<=el; i++) {
	var objEstrela = document.getElementById("star"+i);
	objEstrela.src = "star_p.gif";
	}
}}
</script>
<span onmouseout="estrelas(0)">
<img id="star1" src="star_b.gif" alt="" onmouseover="estrelas(1)"/>
<img id="star2" src="star_b.gif" alt="" onmouseover="estrelas(2)"/>
<img id="star3" src="star_b.gif" alt="" onmouseover="estrelas(3)"/>
<img id="star4" src="star_b.gif" alt="" onmouseover="estrelas(4)"/>
<img id="star5" src="star_b.gif" alt="" onmouseover="estrelas(5)"/>
</span>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jheff Garcia    0

Jheff Garcia
Postado

Gostei do sistema... estou procurando algo assim pro meu site.

 

Eu testei e respondeu ao mouse, mas gostaria de saber como faz para o voto (o clic nas estrelas) ficar registrado e ser exibido para todos os visitantes e ser calculado com os votos dos outros visitantes que também clicaram em mais ou menos estrelas, fazendo uma média da nota geral.

 

Preciso muito rsrsrs

 

Abs...

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

dá uma lida aqui:

 

@Jheff:

http://wbruno.com.br/2011/05/20/votacao-estrelas-star-rating-ajax-jquery/

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito