Minicursos - Javascript

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:

Alterar Imagem Dinamicamente JavaScript

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:

Alterar Imagem Dinamicamente JavaScript

Agora vamos criar 3 funções JavaScript, dessa maneira:

Alterar Imagem Dinamicamente JavaScript

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:

Alterar Imagem Dinamicamente JavaScript

Então vou clicar no botão amarelo. Vejamos o que vai acontecer:

Alterar Imagem Dinamicamente JavaScript

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.



Algumas notícias

O que acontece com o cérebro no exato momento em que morremos

O que passa em nossa cabeça no momento da morte? Não se sabe exatamente e, embora os cientistas tenham alguma resposta, a resposta continua sendo um grande mistério. Além de difícil solução, tentar respondê-la pode criar implicações éticas. No entanto, uma equipe de cientistas da Universidade...

Ler Notícia Completa

Operada e devolvida ao útero, menina que nasceu duas vezes hoje 'acorda sorrindo toda manhã'

Um bebê pode nascer duas vezes? Não é o caso da absoluta maioria das crianças, mas foi assim para a pequena Lynlee Boemer. Em outubro de 2015, sua mãe, Margaret Boemer, descobriu que estava grávida de gêmeos. Ela sofreu um aborto espontâneo, mas um dos bebês sobreviveu. Com dez semanas de ges...

Ler Notícia Completa

Médicos dizem estar perto de chegar a exame de sangue para todos os tipos de câncer

Cientistas dizem que estão mais perto de criar um exame de sangue universal, capaz de identificar todos os tipos de câncer. Estudo conduzido com 1.005 pacientes por uma equipe da Universidade Johns Hopkins, dos Estados Unidos, testou um método que detecta oito tipos de proteínas e 16 mutações ge...

Ler Notícia Completa

Formato JPEG está com os dias contados

Há quantos anos você ouve falar em arquivos JPG? O formato já era utilizado nos primórdios da web comercial nos anos 1990, vivendo há mais de 20 anos como o principal método de compressão de imagens do público. No que depender de Google, Mozilla e outras empresas, isso pode mudar dentro de algum...

Ler Notícia Completa

EUA aprovam 'droga viva', 1ª terapia contra câncer que reestrutura sistema imunológico do paciente

Os Estados Unidos aprovaram o primeiro tratamento que reestrutura o sistema imunológico do paciente para atacar o câncer. A agência reguladora de medicamentos do país - a FDA - diz que a decisão foi um momento "histórico" e que a medicina agora "entra em uma nova fronteira". A companhia Novar...

Ler Notícia Completa
Você gostará destes vídeos: