Cambiar de una imagen a otra al pasar el ratón

Hoy os voy a enseñar un truquito HTML muy útil para hacer más llamativo tus banners de publicidad, o los botones que tengas en tu web ¿Quieres que cuando alguien pase el ratón por encima de una imagen, se cambie a otra automáticamente, y cuando quites el ratón vuelva a la imagen original? Puedes emplear este truco para infinidad de cosas, incluso para crear páginas webs.

 Este efecto es conocido como Rollover en inglés y para que hagáis uso de él os voy a poner el código para que lo uséis de manera simple. En Dreamweaver y Frontpage esta función es muy fácil de implantar, pero esto es otro tema.

Código HTML:

Aquí tenéis el código
<a href= “AQUÍ VA EL LINK AL QUE QUIERES QUE LLEVE ESA IMAGEN” onmouseOver=”document.ejemplo.src=’AQUI VA LA URL DE LA IMAGEN A LA QUE QUIERES QUE CAMBIE’;” onClick= “return false;” onmouseOut=”document.ejemplo.src=’AQUI VA LA URL A LA IMAGEN ORIGINAL’;”>
<img name=”ejemplo” src=”URL DE LA IMAGEN ORIGINAL” width=”240″ height=”120″ border=”0″>
</a>

         Width y Height son la anchura y altura de la imagen

Para que la estética quede ajustada, es conveniente que tanto la imagen original (la estática) como la imagen a la que queremos que cambie tengan las mismas medidas para no desajustar nada y quede todo perfecto.