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

As memórias DDR5 estão chegando e trarão muitas melhorias

A próxima geração de memórias RAM já possui especificações definidas e promete grande melhoria em relação às atuais DDR4. E o mais importante: mesmo com desempenho bastante superior, elas consumirão menos energia. A tensão de trabalho das memórias DDR5 será de apenas 1.1V contra os 1.2V das atu...

Ler Notícia Completa

Google Chrome consumirá menos memória RAM em breve

O navegador da gigante de buscas da Internet é, sem dúvida, um dos melhores disponíveis, mas é inegável que o consumo de memória RAM por parte dele é exagerado. Este problema já se estende por anos, mas parece que em breve ele terá uma solução. Um novo recurso do Windows 10, chamado SegmentHeap...

Ler Notícia Completa

Sites e vídeos sem propagandas? Sim, é possível através da exploração de uma falha!

Seguramente você já se deparou com sites que bloqueiam o conteúdo da página e te obrigam a assinar determinado serviço para ler o conteúdo, certo? Ou foi tentar assistir aquele vídeo e as propagandas em tela cheia não pararam de surgir. Bem, todos já nos deparamos com isso, no entanto, um bug de...

Ler Notícia Completa

Inteligência Artificial cria antibiótico super potente

Pesquisadores do MIT (EUA) identificaram um novo e poderoso composto antibiótico usando um algoritmo de aprendizado de máquina, uma técnica de inteligência artificial. Em testes de laboratório, a droga matou algumas das bactérias causadoras de doenças mais problemáticas do mundo, incluindo algu...

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