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 alterá-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.