Alterar Imagem Dinamicamente
Vamos falar agora de outra propriedade interessante. Vimos, nos tópicos passados, a propriedade getElementById(“id_objeto”).value, que nos permitia manipular um valor contido nesse objeto. Agora vamos ver como altera-lo, caso ele seja uma imagem.
Em HTML, quando queremos inserir uma imagem, usamos a seguinte tag:
<img src=”nome_do_arquivo.jpg” />
Então a imagem será inserida em nossa página.
Agora vamos fazer uma pequena modificação, inserindo o parâmetro id, para que possamos identificar a imagem. Vou fazer esse exemplo com uma imagem chamada semáforo.png.
A tag ficará assim:
<img src="semaforo.png" alt="Semáforo" id="semaforo" />
Então a página ficou dessa forma:
Agora vou separar cada um desses semáforos em 3 arquivos, com os nomes de:
semaforoVerde.png, que terá apenas a luz verde acesa.
semaforoAmarelo.png, que terá apenas a luz amarela acesa.
semaforoVermelho.png, que terá apenas a luz vermelha acesa.
Então vou inserir 3 botões abaixo desses semáforos, com os seguintes códigos:
<form>
<input type="button" id="botaoVerde" value="Verde" onclick="alteraSemaforoVerde();"/>
<input type="button" id="botaoAmarelo" value="Amarelo" onclick="alteraSemaforoAmarelo();" />
<input type="button" id="botaoVermelho" value="Vermelho" onclick="alteraSemaforoVermelho();" />
</form>
Então nossa página ficará dessa forma:
Agora vamos criar 3 funções JavaScript, dessa maneira:
Ou seja, vinculamos cada um dos botões a uma função. Agora a nossa página será carregada com a imagem inicial chamada semáforo.png, mas sempre que um dos botões for clicado o navegador irá trocar, automaticamente, a imagem original pela associada à função JavaScript!
Vamos testar!
Página após o carregamento:
Então vou clicar no botão amarelo. Vejamos o que vai acontecer:
Vejam que a imagem original foi automaticamente trocada pela imagem contendo somente a luz amarela acesa! Com isso vocês viram que é possível trocar uma imagem através do Javascript, e para isso usamos o comando document.getElementById(“nomeObjeto”).src.
Aqui o fizemos através do clique de um botão. No tópico seguinte vou falar sobre uma forma automática de troca.