Imagen que se ilumina utilizando JQuery

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.