Trocar imagens com JavaScript. Dica 22

Nesta dica conferimos como alterar imagens com JavaScript. Para realizar esta dica é necessário que você escolha três imagens.

O vídeo complementa o texto e o texto completa o vídeo, assista.

Em nosso documento HTML inicial temos 3 imagens em uma lista não ordenada, uma quarta imagem que será alterada e, mais três botões.

<!DOCTYPE html>
<html>
    <head>
        <title>Trocar imagens com JavaScript. Dica 22</title>
        <script src="trocaimg.js"></script>
        <link rel="stylesheet" href="trocaimg.css">
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>Trocar imagens com JavaScript. Dica 22</h1>
        <div class="imagens">
            <ul>
                <li>
                    <img src="img/trocaimg01.png" alt="cor verde"">
                </li>
                <li>
                    <img src="img/trocaimg02.png" alt="cor azul">
                </li>
                <li>
                    <img src="img/trocaimg03.png" alt="cor preto">
                </li>
            </ul>
            <img src="img/trocaimg03.png" alt="imagem alterada por JS" id="trocarimg">
            <input type="button" value="verde"/>
            <input type="button" value="azul"/>
            <input type="button" value="preto"/>
        </div>
    </body>
</html>

No arquivo CSS foi inserida uma configuração mínima.

.imagens li img {
    width: 100px;
}
ul {
    list-style-type: none;
    float: left;
}
img {
    width: 300px;
}
#trocarimg {
    margin-left: 50px;
}

O nosso JS inicialmente está vazio e vamos começar inserindo eventos onclick em cada botão.

JavaScript

Como nós já vimos, no HTML eu informei uma função diferente para cada botão. Pelo que eu vi pela web da para fazer isso de mais de uma maneira, mas escolhi essa por achar mais simples.

No JS nós criamos uma função para cada imagem.

function img01 (){
}
function img02 (){
}
function img03 (){
}

Esta dica tem como base as 21 dicas anteriores, por isso, eu uso document.getElementById para gerenciar o conteúdo da minha quarta imagem a partir de seu id.

function img01 (){
    document.getElementById("trocarimg")
}
function img02 (){
    document.getElementById("trocarimg")
}
function img03 (){
    document.getElementById("trocarimg")
}

Agora nós vemos a única informação nova desta dica.

function img01 (){
    document.getElementById("trocarimg").src
}
function img02 (){
    document.getElementById("trocarimg").src
}
function img03 (){
    document.getElementById("trocarimg").src
}

Utilizando src nós conseguimos alterar o valor da tag img pela imagem que nós iremos informar agora.

Abrindo nosso documento HTML vemos que a quarta imagem é alterada clicando nos botões, caso queria que a quarta imagem seja alterada quando o usuário clicar também em uma das três imagens que estão na lateral basta incluir o evento onclick dentro da tag img dessas imagens.

Por uma questão de escolha, nesta dica eu não incluo o código fonte final, mas vale a pena enfatizar que o JS já foi informado na integra, e o CSS não foi alterado.

Dica

Se faz mais de 24 que você não faz nada de novo no CSS, altere o CSS como se fosse apresentar isso para um cliente que ainda não assinou contrato.

Espero que tenha gostado e que este código fonte e dica tenha sido útil, até mais.

Se estiver utilizando bloqueador de propaganda, por favor, coloque este site na lista branca (isto sempre será apenas um pedido). Obrigado pela escolha.