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.


HARDWARE

Entendendo o seu computador

O que há dentro do meu computador?

Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.

  • Gabinetes

  • Placas-Mãe

  • Processadores

  • Memória

  • Fontes

  • Drives Ópticos

  • Discos Rígidos

  • SSD

  • Placas de Som

  • Placas de Vídeo

Você Sabia?

O primeiro jogo a fazer uso de uma Inteligência Artificial foi o Mouse in the Maze, criado em 1955, na União Soviética. Você pode saber mais sobre ele clicando aqui.


O personagem Mario só possui bigode porque quando ele foi criado, em 1981, a resolução de tela dos equipamentos disponíveis não permitia que fosse desenhada uma boca, então os desenvolvedores fizeram o grande bigode para contornar essa limitação tecnológica.


O Playstation só nasceu porque uma parceria entre Sony e Nintendo, para desenvolver uma unidade de CD para o Super Nintendo, fracassou. Clique aqui e saiba mais.


O console Nintendo Entertainment System (NES), da Nintendo, detém o recorde de videogame mais clonado em todo o mundo. Já foram catalogados mais de 300 aparelhos diferentes capazes de reproduzir seus jogos! Saiba mais sobre ele aqui.


A empresa Universal City Studios, detentora dos direitos autorais do King Kong, processou a Nintendo logo após o lançamento de Donkey Kong, pois segundo ela, o game violava os seus direitos. Ela venceu o processo e recebeu da Nintendo uma indenização de quase 2 milhões de dólares.


A IBM detém o recorde de patentes em um único ano, atingindo a marca de 4186 registros no ano de 2008. Clique aqui e saiba mais sobre esta gigante do mundo da tecnologia.