Mudando Imagens com um Clique ou mouseOver

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.

Fonte: http://msdn.microsoft.com/pt-br/library/hh475801.aspx

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s