¿Como hacer que una imagen cambie por otra al situar encima el ratón?

También conocido como Efecto Rollover image, y mira que me lo enseñaron el clases de "HTML 101: conceptos básicos de código y Javascript incrustado en una página web". Tuve que rebuscar para encontrar el subsodicho código, y mira que es fácil y básico.

Sin embargo a día de hoy no se usa este estilo ya que supone cargar 2 imagenes para un solo link (o 3 si usaras otra imagen para el "OnMouseOut") para esto, ya se usa el CSS y el "background-position"

<a href="LINK A LA URL AL HACER CLICK"><img src="IMAGEN INICIAL" onmouseover="this.src='URL DE LA IMAGEN AL SITUAR EL RATON ENCIMA'" onmouseout="this.src='URL DE LA PRIMERA IMAGEN O DE UNA TERCERA IMAGEN SI ASI FUESE'" /></a>

Tan solo teneis que sustituir las zonas subrayadas y tendreis el efecto