Ir para conteúdo

POWERED BY:

Arquivado

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

rodurma

Mudar imagem com o mouse em cima.

Recommended Posts

Galera tenho 5 estrelas amarelo claro alinhadas na horizontal.O que gostaria de saber é como eu faço pra quando a pessoa passar o mouse na primeira estrela, só ela ficar amarelo mais escuro e se ele passar o mouse na segunda estrela a primeira e a segunda mudam a cor, se passar na terceira , a primeira a segunda e a terceira mudam de cor e assim vai....Parecido com o Windows Media Player (onde coloca as estrelas das músicas que a gente prefere).Abraços.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cara você tem varias alternativas, e obviamente todas irao usar o evento onMouseOver e onMouseOut e também funções javascript que troquem imagens, o DW faz isso,...bem você terá que criar pelo menos duas imagens diferentes (suas estrelas de tais cores)ai o resto é só chamar as funções...ou você pode criar varias imagens, a original, e as outras com o numero certo de estrelas escuras, e trocar tb...Bem eu nunca fiz este script de troca, mas como disse o DW gera...testa ai

Compartilhar este post


Link para o post
Compartilhar em outros sites

Galera tenho 5 estrelas amarelo claro alinhadas na horizontal.

O que gostaria de saber é como eu faço pra quando a pessoa passar o mouse na primeira estrela, só ela ficar amarelo mais escuro e se ele passar o mouse na segunda estrela a primeira e a segunda mudam a cor, se passar na terceira , a primeira a segunda e a terceira mudam de cor e assim vai....

 

Parecido com o Windows Media Player (onde coloca as estrelas das músicas que a gente prefere).

 

Abraços.

Opa, eu tenho a mesma dúvida! Não sei se você já solucionou este problema, se já resolveu posta aqui para eu ver por favor. Alguém tem uma solução? Não quero baixar um daqueles scripts prontos, por isso quero fazer meu próprio sistema de votação simples.

 

Estou tentando assim, mas está errado:

 

<html>

<head>
<title>teste</title>
</head>
<body>
<script language="JavaScript"><!--
VARIhover = 
 (((navigator.appName == "Netscape") && 
 (parseInt(navigator.appVersion) >= 3 )) || 
 ((navigator.appName == "Microsoft Internet Explorer") && 
 (parseInt(navigator.appVersion) >= 4 )));
function VARIpreload(img) 
{
 var a=new Image(); a.src=img; return a; 
}
if(VARIhover)
{
 VARInav2n=VARIpreload("http://tudoaki.net/imagens/icones_areas/estrela_vazia.gif");
 VARInav2h=VARIpreload("http://tudoaki.net/imagens/icones_areas/estrela_preenchida.gif");
}
// --></script>
<img src="http://tudoaki.net/imagens/icones_areas/estrela_vazia.gif" width="13" height="13" border="0" alt="Home" name="VARInav2"></a>
<img src="http://tudoaki.net/imagens/icones_areas/estrela_vazia.gif" width="13" height="13" border="0" onmouseover="if(VARIhover) document['VARInav2'].src=VARInav2n.src" style="cursor:hand">
<img src="http://tudoaki.net/imagens/icones_areas/estrela_vazia.gif" width="13" height="13" border="0" onmouseover="if(VARIhover) document['VARInav2'].src=VARInav2h.src" style="cursor:hand">


</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

<html>
<head>
<title>Untitled Document</title>
<script>
function muda(num){
	if (num == 1){
		document.getElementById('linha').innerHTML='<img src="imagem2.jpg" onMouseOut="muda(2)">';
	}else{
		document.getElementById('linha').innerHTML='<img src="imagem1.jpg" onMouseOver="muda(1)">';
	}
}
</script>
</head>
<body>
<label id="linha">
<img src="imagem1.jpg" onMouseOver="muda(1)">
</label>
</body>
</html>

isso deve resolver...

 

qualquer coisa manda um post...

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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