Mudando Imagens com um Clique ou mouseOver
Diego Blanco
Setembro 2011
Tecnologias:
Javascript
Uma das técnicas bastante utilizadas via JavaScript, é a alteração de alguma imagem quando ela é clicada ou passa por um mouseover.
Uma maneira simples de se fazer isso, é passando como parâmetro de uma função JavaScript um indíce para cada imagem que voce deseja alterar, fazendo com o que o JavaScript encontre qual das imagens devem ser alteradas:
JavaScript
function mudaImagem(i) {
if (i == 1) {
document.getElementById("imagem1").src="imagem1.jpg";
document.getElementById("imagem2").src="imagem2_not.jpg";
} else if (i == 2) {
document.getElementById("imagem1").src=" imagem1_not.jpg";
document.getElementById("imagem2").src="imagem2.jpg";
}
}
O código recebe um índice, com base nisso verifica quais das operações deve realizar. Nesse caso fiz um exemplo alterando duas imagens, quando uma é clicada, a outra muda para uma imagem não selecionada e a imagem clicada, muda para uma imagem selecionada.
Se o seu caso seja apenas de alterar imagens ao longo da página, sem que elas interfiram uma com as outras, basta remover a linha de alteração da segunda imagem de cada operação de mudança.
Para utilizar na sua página, basta incluir o HTML abaixo:
HTML
<a href="#" ><img src="imagem1.jpg" alt="Imagem1" id="imagem1" onclick="mudaImagem(1)" /></a>
<a href="#" ><img src="imagem2_not.jpg" alt="Imagem2" id="imagem2" onclick="mudaImagem(2)" /></a>
Com isso você incializa sua página com uma imagem já como seleciona e uma segunda imagem ainda não selecionada, para poder testar a transição entre ambas.
Escrito por: Diego Blanco – Microsoft Technical Audience Team