Una imagen que es sustituida por otra al pasar el cursor sobre ella aporta elegancia al blog y a su vez, atrae a los lectores. Sólo necesitas dos imágenes para realizar el truco y un sólo código, sin script alguno.
Seguidamente puedes ver un ejemplo, pasa el cursor sobre la imagen para que cambie:
Para instalarlo, bastará con incluir este código en el cuerpo de una entrada o en un gadget HTML-Javascript:
<img src="URL PRIMERA IMG" onmouseover="this.src='URL SEGUNDA IMG';" onmouseout="this.src='URL PRIMERA IMG';"/>
Reemplaza las líneas resaltadas en color naranja por la dirección de la imagen que aparecerá por defecto y las de color verde por la URL de la imagen que se mostrará al pasar el cursor por encima.
Ten en cuenta que al implementarlo en una entrada tendrás que hacerlo en el modo 'Edición de HTML' y no en 'Redactar'.
Con esto podrás mostrar en tu blog imágenes que muestren los cambios de algo en particular, crear un menú de navegación con iconos personalizados o añadir una descripción a tu fotografía favorita.
Ten muy en cuenta el tamaño de las imágenes pues cuanto más parecido sea mejor resultado obtendrás.
Nota:
Que gran ayuda es esto!! Gracias.
Jaime, lo explicas tan bien que pude ponerlo en mi blog. Hacia tiempo que buscaba esto porque queria poner un menu de navegacion con mis propias fotitos.
Saludos!
Muy útil, lo tendré en cuenta. Bonitas las fotos del ejemplo.
no me pasa las fotos, solo aparece la foto q e puesto en la url 1
:S
Me alegra que te sea de utilidad, Anónimo.
Seguro que obtuviste un resultado precioso, SaraL. Gracias por tu comentario.
¡Gracias Roger! El truco es práctico e interesante por lo que apuntarlo es buena idea.
Anónimo, podría deberse al tamaño de las imágenes. Evita las de gran peso e intenta que tengan un tamaño reducido. Ten en cuenta que el efecto no se produce de inmediato como en el ejemplo, tendrás que dejar el cursor al menos durante dos segundos.
muy buen truco, simple y efectivo
una cosa y como se pondria para que al dar click sea un link?
¿Funciona con internet explorer?
PeliculasTube, revisa esta entrada pues en ella se comenta el atributo necesario para crear un enlace. Tan solo tendrás que reemplazar TITULO DEL LINK por el código de la imagen.
Por supuesto que funciona en Internet Explorer, Blogs Cristianos.
Gracias Jaime funciono.
bn buen aporte gracias men me sasco de dudas y me ayuda arto
Gracias men.
Hace rato estaba buacando esto y lo encontre, pero como estaba mal explicado no me salio pero ahora si ;)