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 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:

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.



Notícias - Games

Atari VCS é finalmente lançado e surpreende

O Atari VCS foi lançado recentemente e trouxe suporte a praticamente todos os serviços de streaming de jogos já disponíveis. A única exceção foi por conta do Playstation Now, cujo suporte nativo não é oferecido, mas ele pode ser acessado através do modo PC do VCS, já que o console possui Googl...

Ler Notícia Completa

The King of Fighters XV já tem data para chegar

A SNK finalmente definiu uma data para lançamento do tão esperando The King Of Fighters XV. Segundo comunicado recente, o game de luta deve chegar em 17 de fevereiro de 2022 para os consoles Playstation 4, Playstation 5, Xbox Series X e S, além de PCs. O título contará com 39 personagens e mante...

Ler Notícia Completa

Phil Spencer aprovou o Steam Deck rodando o xCloud

O chefe da divisão XBOX e vice presidente da divisão de jogos da Microsoft, Phil Spencer, recebeu um Steam Deck e passou uma semana testando o dispositivo da Valve. Nas palavras dele: “trata-se de um dispositivo muito legal. É interessante ter os jogos disponíveis em qualquer lu...

Ler Notícia Completa

Conheça o Playstation 2 portátil criado por um brasileiro

Claudio Adriano decidiu criar uma versão portátil do console Playstation 2, da Sony. Inspirado no Nintendo Switch, o console ficou pronto depois de 2 anos de trabalho e algumas interessantes adaptações. Partindo de uma placa-mãe de um PS2 Slim, Claudio fez os encaixes necessários para que a pla...

Ler Notícia Completa
Ajude o Contém Bits com um cafezinho!

Se você gostou do artigo, se ele lhe foi útil de alguma maneira e você quiser ajudar o Contém Bits, saiba que é simples, fácil e rápido. Basta clicar na imagem do PayPal (ou no cafezinho) e seguir as instruções, em ambiente seguro e com o respaldo do Paypal. Eu agradeço muito! :)


Você gostará destes vídeos!