Como alterar o IMG SRC usando JavaScript

Escrito por robert allen | Traduzido por vinícius albuquerque
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como alterar o IMG SRC usando JavaScript
O atributo "src" de qualquer tag "img" no documento HTML pode ser alterado usando JavaScript (Comstock/Comstock/Getty Images)

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.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 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 "<img>". Se ela apontar para um arquivo chamado "foto_0.jpg", na mesma pasta que o documento HTML, a tag será parecida com isso: <img src="foto_0.jpg">. É possível que haja nela outros atributos.

  2. 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: <img id="change_image" src="foto_0.jpg">. Se houverem outros atributos nela, como um "alt" ou um "title", insira o "id" antes deles.

  3. 3

    Crie uma nova linha no arquivo HTML, imediatamente após a tag <img>, vinculando uma tag <span> à 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:

    <span style="border: 1px solid black" onclick="document.getElementById('changeimage').src='foto_1.jpg'">Change Image</span>

  4. 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 & Advertências

  • 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 , 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.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível