Anteriormente vimos cómo cambiar una imagen por otra al pasar el mouse utilizando un script. Pero para quienes al igual que yo les gustan las cosas sin tantas complicaciones, veremos una forma simplificada de tener el mismo efecto, sin scripts, usando un sólo código.
Este es un ejemplo, pasa el cursor sobre la imagen para que cambie.
Sólo basta que pongas este código en una entrada o un elemento HTML/Javascript:
<img src="URL de la imagen UNO" onmouseover="this.src='URL de la imagen DOS';" onmouseout="this.src='URL de la imagen UNO';"/>
Cambia lo que está en rojo por la URL de la imagen que tendrás inicialmente, y lo que está en verde por la URL de la imagen que cambiará al pasar el mouse. Trata que las dos imágenes tengan el mismo tamaño para conseguir un mejor resultado.
Puedes usarlo para hacer algún menú o para mostrar fotos de "antes y después".
No hay comentarios: