Efecto Rollover en una imagen

¿Cómo cambiar de una imagen a otra pasando el raton por encima?

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 (yo hace tiempo creé una en que esta función era la principal atención de la web)


[ad code=1 align=center]
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.

Aquí os muestro un ejemplo que he creado para que veáis el resultado de este truco y lo bien que queda, al menos a mi me gusta este truquillo:




Espero que os haya gustado, y si tenéis cualquier problema y véis que no conseguís hacer uso de él, lo preguntáis, pero ya os digo que es muy fácil ;)