Mais
×

Como alterar o IMG SRC usando JavaScript

Atualizada April 17, 2017

Se você deseja dar vida às páginas da Web com imagens que mudam em tempo real, uma solução é usar JavaScript para editar o caminho da imagem, que fica no atributo "src" da tag "img". Embora quase qualquer ação possa ser utilizada como gatilho para alterar o "src", este tutorial demonstrará como vincular a alteração a um botão da página. Por exemplo: se desejar exibir uma versão maior de uma imagem ao invés de sua miniatura, pode inserir um botão que exiba a imagem completa quando clicado.

Instruções

O atributo "src" de qualquer tag "img" no documento HTML pode ser alterado usando JavaScript (Comstock/Comstock/Getty Images)
  1. Abra o arquivo ".html" em um editor de texto simples. Role a página para encontrar a imagem que deseja editar. No HTML, as imagens são definidas pela tag "". Se ela apontar para um arquivo chamado "foto_0.jpg", na mesma pasta que o documento HTML, a tag será parecida com isso: . É possível que haja nela outros atributos.

  2. Imediatamente antes do atributo "src", insira o atributo "id" na imagem e defina-o como "change_image". A tag deve ficar mais ou menos assim: . Se houverem outros atributos nela, como um "alt" ou um "title", insira o "id" antes deles.

  3. Crie uma nova linha no arquivo HTML, imediatamente após a tag , vinculando uma tag à função JavaScript "onclick". Para isso, é necessário conhecer o caminho para a nova imagem. Se ela se chamar "foto_1.jpg" e estiver localizada na mesma pasta que a primeira imagem, o código será assim:

    Change Image

  4. Salve o documento HTML e dê um clique duplo nele para abri-lo no navegador. Depois da imagem, você verá um botão chamado "Change Image" (Alterar imagem). Clique nele para substituir o caminho do arquivo da imagem pelo valor fornecido na função "onclick".

Dicas

  • Também é possível alterar o atributo "src" de uma imagem como parte de um efeito de sobreposição, para que a imagem mude quando o cursor do mouse se mover sobre ela. Para isso altere a tag <img>, adicionando "onMouseOver="this.src='foto_1.jpg'" onMouseOut="this.src='foto_0.jpg'" antes do atributo "src". Esse código carregará a "foto_1.jpg" quando o cursor estiver sobre a imagem e voltará para "foto_0.jpg" quando o cursor deixar a área dela.
bibliography-icon icon for annotation tool Cite this Article