Cómo cambiar "img src" con JavaScript

Escrito por robert allen | Traducido por contributing writer
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo cambiar "img src" con JavaScript
El atributo "src" de cualquier etiqueta "" de tu código HTML puede ser modificado usando JavaScript. (Comstock/Comstock/Getty Images)

Si quieres darle vida a tu página web con imágenes que cambian dinámicamente, puedes utilizar JavaScript para modificar la fuente de la imagen, que se encuentra almacenada en el atributo "src" de la etiqueta "<img>". Aunque puedes utilizar casi cualquier acción para provocar el cambio del origen de una imagen, este tutorial te mostrará cómo enlazar el cambio a un botón de la página. Por ejemplo, si quieres mostrar una versión más grande de una imagen en lugar de una en miniatura, puedes colocar un botón que muestre la imagen completa al hacer clic en ella.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Abre tu archivo .html con un editor de texto plano. Desplázate hacia abajo hasta encontrar la imagen de la que quieres cambiar el origen. En HTML las imágenes se definen con la etiqueta "<img>". Si la imagen apunta a un archivo llamado "picture_0.jpg" situado en la misma carpeta en la que se encuentra el documento HTML, la etiqueta sería algo parecido a "<img src='picture_0.jpg'>". Esta etiqueta también puede incluir otros atributos.

  2. 2

    Justo antes del atributo "src" añade un atributo "id" para tu imagen y llámalo "change_image". La etiqueta de la imagen ahora debe ser algo parecido a "<img id='change_image' src='picture_0.jpg'>". Si hay otros atributos en la etiqueta "<img>", como "alt" o "title", añade antes el atributo "id".

  3. 3

    Crea una nueva línea en el archivo HTML, justo después de la etiqueta "<img>", enlazando una etiqueta "<span>" a la función "onclick" de JavaScript. Necesitarás conocer la ruta de la nueva imagen. Si la imagen se llama "picture_1.jpg" y se encuentra en el mismo directorio que la primera imagen, el código sería algo como: <span style="border: 1px solid black" onclick="document.getElementById('changeimage').src='picture_1.jpg'">Change Image</span>.

  4. 4

    Guarda el archivo HTML y después haz doble clic sobre él para abrirlo en tu navegador web. Después de la imagen verás un botón llamado "Change image" ("Cambiar imagen"). Haz clic sobre él para cambiar el origen de la imagen al valor que proporcionaste en la función "onclick".

Consejos y advertencias

  • También puedes cambiar el atributo "src" de la etiqueta "" para conseguir un efecto de transición, de manera que la imagen cambie cuando pases el ratón sobre ella. Para hacerlo, cambia la etiqueta de la imagen y añade "onMouseOver="this.src='picture_1.jpg'" onMouseOut="this.src='picture_0.jpg'" " antes del atributo "src". Este código cargará "picture_1.jpg" cuando el ratón pase por encima de la imagen, y volverá a cambiarla a "picture_0.jpg" cuando el ratón salga de la zona.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles