[HTML] Cambiar imágen al pasar el puntero encima

Este código sirve para que cuando pasemos el cursor encima de una imagen, ésta se cambie por otra:

<img
src="imagen1"
onmouseover="this.src='imagen2'"
onmouseout="this.src='imagen1'"
/>

Les voy a demostrar el funcionamiento del código con un camaleón.

Las imágenes podrán ser cualquier formato jpg, gif, png que hayan subido previamente.

La imagen1 es la imagen que se visualizará por defecto.

Camaleón 3D de color verde

La imagen2 es la imagen que se visualizará cuando pasen el puntero del mouse por encima.

Camaleón 3D de color rojo

Resultado

Gif de camaleón cambiando de color al momento que se pasa el cursor por encima
Animación del resultado

Nota: Se hace la demostración con un gif pues el servidor actual no soporta JavaScript

Autor: atrumgeost

Technology, design, and WordPress enthusiast. Cats, anime, music and podcasts on a day-to-day basis.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s