Cambiar la imagen al pasar el cursor por encima:

martes, 22 de septiembre de 2009
Con este truco, y teniendo dos imágenes del mismo tamaño, puedes conseguir que al pasar el cursor por encima de ella, se muestre la segunda.
Puedes ver un ejemplo colocando el cursor encima de la imagen del elemento "Configuración" de la sidebar de este blog, o bien en la siguiente imagen:


1. Colocaremos en el lugar de la entrada o en un Elemento HTML donde queremos conseguir este efecto el siguiente código:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL DEL ENLACE"><img style="display: block;" src="URL DE LA PRIMERA IMAGEN" onmouseover="this.src='URL DE LA SEGUNDA IMAGEN'" onmouseout="this.src='URL DE LA PRIMERA IMAGEN'" /></a>
 2. Cambiamos simplemente 2 veces la URL DE LA PRIMERA IMAGEN y una vez URL DE LA SEGUNDA IMAGEN.

Además, si queremos que al pinchar en la imagen, esta te dirija a algun sitio, cambiamos URL DEL ENLACE por la dirección deseada. Si queremos que la imagen no dirija a ningun sitio, simplemente eliminamos esta parte: href="URL DEL ENLACE"

¡Suerte!

10 comentarios:

  • Smark

    muchas gracias por el tutorial ese efecto es muy bueno ☺
    intentare aplicarlo a algunos de mis post

    saludos

  • La Trucoteca de Blogs

    Hola de nuevo Smark.
    Me alegra que te haya gustado el truco, ¿a que es chulo? :).
    Ya me pasé por tu blog, y está genial.
    Muchos saludos y nos vemos!!!!

  • Anda buscando algo com esto!!

    Gracias!!!

  • La Trucoteca de Blogs

    Hola Dll
    Nos alegra que te haya servido el truco ;)
    Ya sabes, si necesitas algo, aqui nos tienes.

    Saludines!!!

  • Coloque en mi foro este truco, en unas cuentas imagenes, pero me salen unas encima de otra, en vez de una linea recta de derecha a izquierda, alguien me puede ayudar? gracias

  • La Trucoteca

    Anónimo, eso puede ser probablemente porque en el foro se utiliza BBCode, que no es igual que el HTML. Aún así, pásanos la url de tu foro para que le podamos echar un vistazo ;)

    ¡Saludos!

  • Maria Del Huerto

    Muchas gracias!!! quedo muy bien en los links de la barra lateral!!

    http://coapilinchosmburucuya.blogspot.com/

    Saludos

  • La Trucoteca

    Hola, Maria Del Huerto!
    La verdad es que te quedó fantástico el efecto en las imágenes de la sidebar, nos alegra mucho que te haya servido el truco :)
    Un saludo!!

  • Photography by Cesar Chavez

    En que seccion de mi blog copio y pego este codigo ??

    La verdad yo no se nada de esto y no se nada de programacion... Alguien me puede decir como le hago para aplicar este efecto en mi blog.

    En BLOGGER o en WORDPRESS !!!

    AYUDAAAAA ! ! ! !

  • Gracias me estaba volviendo loca

  • Ir Arriba