Cambiar imagen al poner el cursor encima

En este post aprenderéis cómo cambiar una imagen al pasar el mouse por encima de la imagen previa. Veréis como podemos hacer esto sin complicaciones, es decir, con un sólo código, sin necesidad de complicarse la vida con scripts.
Esto que véis aquí es un ejemplo:

Lo único que tenéis que hacer es copiar el siguiente código en vuestro post o en 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". Y ya sabéis cualquier duda estamos aquí para solucionarla.