Una funcionalidad muy útil consiste en cambiar una imagen al pasar el ratón por ella, de hecho yo me he visto obligado a usar este código en dos proyectos en menos de un mes.

Como vamos a ver es algo realmente sencillo y que se hace con una sola línea de código…

<img alt="" onmouseout="this.src='url inicial';" onmouseover="this.src='url de la imagen al pasar el ratón';" src="url inicial" width="80%"/>

De este modo tenemos:

• url inicial: es la url de la imagen que se verá cuando el elemento no tiene el ratón encima.
• url de la imagen al pasar el ratón

De esta forma podemos crear efectos interesantes para recursos, como por ejemplo menús de imágenes, gamificaciones…