Imagen que se ilumina utilizando JQuery

viernes, 19 de marzo de 2010
Siguiendo unos sencillos pasos, se puede conseguir un efecto realmente increible, con el cual podremos lograr que al pasar el cursor sobre una imagen (en este caso un boton de RSS) esta se ilumine o recupere su color original.


Puedes ver el ejemplo en nuestro blog de pruebas, en el boton grande de RSS.
Es imprescindible tener dos imágenes: una en blanco y negro (con el Modo Escala de Grises en Photoshop, por ejemplo), y otra en color.
En primer lugar, debemos aplicar el script JQuery en nuestra plantilla; para ello nos dirigiremos a Diseño>Edición de HTML y añadimos antes de </head> el siguiente bloque:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/latrucoteca/a/fade-desvanecimiento%5B1%5D.js' type='text/javascript'/>

ATENCIÓN! La parte en azul incluye el Script de JQuery, es decir, si ya lo tienes integrado en tu plantilla no hace falta que lo vuelvas a poner. En este caso solo debes agregar la segunda parte.

2. Coloca antes de la etiqueta ]]></b:skin>el siguiente código:

#rss {
width:300px;
height:225px;
margin:auto;
position:relative;
display:block;}
#rss a{
background-image:url(http://i825.photobucket.com/albums/zz180/latrucoteca/rss_bw-300x225.png);
background-repeat: no-repeat;
position:relative;
display:block;
width:300px;
height:225px;
}
#rss span.hover{
width:300px;
height:225px;
background-image:url(http://i825.photobucket.com/albums/zz180/latrucoteca/rss-300x225.png);
background-repeat: no-repeat;
position:relative;
display:block;
}
*Puedes cambiar el id (coloreado en azul) por el nombre que desees, pero recuerda que también deberás cambiar por el mismo nombre el que se encuentra establecido en el script del efecto, por lo que tendrías que editarlo y subirlo de nuevo (o no funcionaría).
También puedes cambiar las URL de las imagenes (primera, blanco y negro; segunda, con color), y los height y width, que deben encajar con las dimensiones de la imagen.

3. Ahora, Guarda los cambios, y añade este código en un nuevo elemento HTML:

<div id="rss"><a href="#" title="Titulo"></a></div>

Por último, puedes cambiar el id, si has decidido hacerlo en los pasos anteriores, y por supuesto el # por la URL del enlace, y Titulo, por el texto que saldrá al pasar el cursor por encima.

4. Guarda el gadget, y ya dispondrás de un magnífico efecto en tu blog (¡Por fin!)

Recuerda que si quieres este efecto, por encima de todo, lo que se necesita es el Script de JQuery, que causa conflictos con Scriptaculous, por lo que no os recomendamos tener los dos a la vez (a no ser que quieras probar la solución de Banaka Banaka!).

Visto en Pazos Blogger, gracias a Design-Notes.

7 comentarios:

  • La Trucoteca

    Hola Juanma
    Nos alegra que te guste, es un efecto bastante elegante e interesante :D
    Saludicos!

  • Anonymous MK

    hola, bue nefecto amigo , pero como puedo hacer para que se muestra como una imgen estatica en cualquier parte del blog, asi como tienes la imagen de subir. gracias y buena web.

  • La Trucoteca

    En ese caso, Madmike, coloca en el paso tres lo siguiente:
    <div style="display:scroll;position:fixed;bottom:0px;right:0px;" id="rss"><a href="#" title="Título"></a></div>

    Esperamos que te sirva :D
    Saludos!

  • Ana

    Hola:)
    Vereis hice todo eso, pero cuando le intento poner ese efecto a una foto en el título no puedo porque al poner lo del paso 3 me pone esto: Etiqueta no permitida: DIV

    Tambien lo he intentado con lo que le haveis puesto a Madmike pero sigue poniendo lo mismo:(

    Porfavor si podeis, decidme algo para solucionarlo.
    Gracias.

  • La Trucoteca

    Hola Ana. ¿Dónde estás intentando implementar el 3er código? ¿En la plantilla directamente, o a qué te refieres con "a una foto en el título"?
    Prueba con alguna imagen en un nuevo elemento HTML, porque no debería darte ese error...

  • That Alice.

    Hola, el paso tres no sé donde ponerlo, es decir, hago todo lo de antes y lo guardo, pero ¿dónde está lo de "nuevo elemento HTML"?
    Y también tengo otra duda, al hacer los pasos anteriores, si le doy a vista previa me sale mi blog con muchas letras arriba del todo, ¿Eso por qué es?
    Muchas gracias, yo tengo dos blogs, y esto lo estoy intentando poner en "La muerte es el principio de la inmortalidad, prometerunfuturo.blogspot.com.es"

  • Ir Arriba