Ir para conteúdo

POWERED BY:

Arquivado

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

Felipe.P

[Resolvido] Trocar imagem de DIV

Por , em Desenvolvimento frontend

Recommended Posts

Felipe.P    0

Felipe.P
Postado

Fala pessoal o layout que tenho é mais ou menos o seguinte

 

79c903d1.png

 

 

No quadrado (uma div) tem uma imagem definida já.

Gostaria de saber como faço para que quando eu passar o mouse em cima dos links essa imagem fosse alterada por outra, de acordo com o link.

Não sei se é a área correta mas postei aqui, valew.

 

Fico no aguardo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gutoffline    1

Gutoffline
Postado

Veja esse código, é uma forma de fazer o que você quer:

 

<html>
<head>
<title>AAA</title>
<script type="text/javascript">
	function TrocarImagem(imagem){
		imagem = imagem;
		alert(document.getElementById("ImagemPrincipal").src);
		alert(imagem);
		document.getElementById("ImagemPrincipal").src = imagem;
	}
</script>

</head>
<body>
<a href="javascript:TrocarImagem('wallpaper_widescreen3.jpg');">Imagem 1 </a>
<a href="javascript:TrocarImagem('avx9b.jpg');">Imagem 1 </a>
<div id="ImagemPro">
	<img id="ImagemPrincipal" src="wallpaper_widescreen.jpg" width="200" />
</div>
</body>
</html>

 

Fala pessoal o layout que tenho é mais ou menos o seguinte

 

79c903d1.png

 

 

No quadrado (uma div) tem uma imagem definida já.

Gostaria de saber como faço para que quando eu passar o mouse em cima dos links essa imagem fosse alterada por outra, de acordo com o link.

Não sei se é a área correta mas postei aqui, valew.

 

Fico no aguardo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fogomax    1

Fogomax
Postado

Cara, tem um método mais fácil, que é por CSS.

Faz assim:

 

#NomeDaDiv {
    background-image:Imagem;
}

#NomeDaDiv:hover {
    background-image:OutraImagem;
}

 

Simles. ^_^

Compartilhar este post

Link para o post
Compartilhar em outros sites

Felipe.P    0

Felipe.P
Postado

Cara, tem um método mais fácil, que é por CSS.

Faz assim:

 

#NomeDaDiv {
	background-image:Imagem;
}

#NomeDaDiv:hover {
	background-image:OutraImagem;
}

 

Simles. ^_^

Sim mano nesse esquema eu sei, mas é quando passa o mouse em cima do link que muda a imagem da div saca ?

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gutoffline    1

Gutoffline
Postado

Postei a function com minhas observações segue a finalizada:

 

function TrocarImagem(imagem){

document.getElementById("ImagemPrincipal").src = imagem;

}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gutoffline    1

Gutoffline
Postado

Postei a function com minhas observações segue a finalizada:

 

   function TrocarImagem(imagem){
                       document.getElementById("ImagemPrincipal").src = imagem;
               }

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fogomax    1

Fogomax
Postado

Sim mano nesse esquema eu sei, mas é quando passa o mouse em cima do link que muda a imagem da div saca ?

 

Então usa o javascript do cara que postou acima. ^_^

Compartilhar este post

Link para o post
Compartilhar em outros sites

Felipe.P    0

Felipe.P
Postado

Postei a function com minhas observações segue a finalizada:

 

   function TrocarImagem(imagem){
                       document.getElementById("ImagemPrincipal").src = imagem;
               }

 

em qual parte do código java script eu vou colocar essa funciton?

 

Postei a function com minhas observações segue a finalizada:

 

   function TrocarImagem(imagem){
                       document.getElementById("ImagemPrincipal").src = imagem;
               }

 

 

 

vlw mano funcionou, fiz uns ajustes no link

porque eu queria que mudasse a imagem apenas quando o mouse pasasse sobre o link e voltasse a imagem original quando tirasse o mouse de cima do link

 

no link ficou assim

 

<a href="" onmouseover="javascript:TrocarImagem('smile2.gif');" onmouseout="javascript:TrocarImagem('smile.gif');">Link 1</a>

 

funcionou certinho

Compartilhar este post

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

Informação importante

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

  Aceito