Rollover sencillo con imágenes sencillas
07-ene-2009
17
A instancias de una lectora, una manera sencilla de dar un mejor aspecto a nuestros enlaces de imágenes.
Se trata de crear una clase que muestre la imagen en su formato original y con el evento HOVER, para que cuando pasemos el puntero por encima, esa misma imagen se desplace unos pocos pixels abajo y a la derecha, al tiempo que se atenúa su color, aumentando su transparencia.
Para ello, nos situamos en la plantilla justo antes de ]]></b:skin> e insertamos el siguiente código:
Actualización: Se han incorporado nuevos atributos al código para que la transparencia se ejecute en el mayor número de navegadores posible.
Una vez guardadas las modificaciones y para aplicarlo en las imágenes deseadas, sólo resta añadir la clase rollover a la imagen en cuestión. Las que se muestran al principio del post tienen el siguiente código, en el que se ha marcado lo añadido:
Para hacer un auténtico rollover en el que una imagen es sustituida por otra distinta, ver el anterior post: Botones en movimiento: rollover.
 |  |
Se trata de crear una clase que muestre la imagen en su formato original y con el evento HOVER, para que cuando pasemos el puntero por encima, esa misma imagen se desplace unos pocos pixels abajo y a la derecha, al tiempo que se atenúa su color, aumentando su transparencia.
Para ello, nos situamos en la plantilla justo antes de ]]></b:skin> e insertamos el siguiente código:
.rollover {
filter:alpha(opacity=100);
-moz-opacity:1.0;
-khtml-opacity: 1.0;
opacity: 1.0;
padding:0px 2px 2px 0px;
}
.rollover:hover {
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
padding:2px 0px 0px 2px;
}
filter:alpha(opacity=100);
-moz-opacity:1.0;
-khtml-opacity: 1.0;
opacity: 1.0;
padding:0px 2px 2px 0px;
}
.rollover:hover {
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
padding:2px 0px 0px 2px;
}
Actualización: Se han incorporado nuevos atributos al código para que la transparencia se ejecute en el mayor número de navegadores posible.
Una vez guardadas las modificaciones y para aplicarlo en las imágenes deseadas, sólo resta añadir la clase rollover a la imagen en cuestión. Las que se muestran al principio del post tienen el siguiente código, en el que se ha marcado lo añadido:
<a href="http://oloblogger.blogspot.com"><img class="rollover" src="http://farm3.static.flickr.com/2203/1968589251_521df116f8_o.png" /></a> <a href="http://oloman-cosicas.blogspot.com"><img class="rollover" src="http://farm1.static.flickr.com/199/504337039_59c346eec5_o.jpg" /></a>
Para hacer un auténtico rollover en el que una imagen es sustituida por otra distinta, ver el anterior post: Botones en movimiento: rollover.
Suscribirse a:
Enviar comentarios (Atom)
NINGUN DERECHO RESERVADO
...aunque se agradece un enlace.
Si crees que algo aquí vulnera los derechos de otro, mándanos un correo.
COLEGUILLAS
17 comentarios:
Muchas Gracias por el truco =D sabia que me ibas a ayudar te lo agradezco, ahora me funciona, cuando agregue los favicones serás el primer enlazado :D
Gracias...
Hola.
Me gustaría pedirte una cosa, aunque no sé si es posible. Quiero tener un widget que consista en la presentación de las imagenes publicadas en el blog. Pero no me refiero a subir las imágenes al widget una a una, sino que el widget las encuentre en el blog ya publicadas y las valla presentando aleatoriamente.
Espero haberme explicado con claridad y espero que exista dicho widget. En cualquier caso: gracias.
Mucho mejor! Ahora se ve mejor todo lo pulsable. Gran invento!
Medecrece, he visto una forma fácil de hacer lo que quieres, pero como funciona con un feed, no puedo comprobarlo hasta que se actualice. Si funciona bien, en unos días lo publico. Un saludo.
Oloman, como estas.
Quiero saber como hiciste ese favicon como gif, esta buenisimo... gracias
Gracias Oloman
Bueno Alexis en los enlaces podrás encontrar respectivamente cómo crear imagenes animadas y cómo poner el favicon creado en el blog.
Saludos
Gracias Oloman... Pero tengo otra consulta, hay algun gadget o alguna forma de poder poner un resumen de entradas por sobre las mismas (que aparecen como titulos solamente). En mi blog http://clinicaysalud.blogspot.com te daras cuenta que solo aparecen los titulos de las entradas y para verlas se hara click sobre el titulo, pero hay alguna posibilidad de que sobre estos titulos aparezca un resumen de las primeras entradas, con alguna especia de "Leer mas..."????
Gracias
Oloman, el gadget que necesito es para que este sobre las entradas, por si acaso no me sirve entonces el Leer mas que se pone a las entradas mismas... Gracias
Me parece entender que quieres un resumen de entradas adicional a lo que ya tienes.
Normalmente con el artilugio Archivo del Blog, debería ser suficiente, pero si quieres que incluya además el principio del texto del post, aunque no se vean todas las entradas (sólo las X más recientes), tu solución puede estar en http://oloblogger.blogspot.com/2007/02/ultimas-entradas-dos-maneras-de.html
Me ha encantado eso del alpha (rollover) usando una sola imagen. Es muy práctico; pero ¿cómo podría evitar que a la hora de hacer rollover afecte lo demás de la página?
Es que como todo se va un poco a alpha también (incluso en esta página ocurre); y eso parece inconveniente a la hora de compararlo con el típico rollover de dos imágenes.
En teoría, el efecto sólo debería afectar a los elementos en que incluyas la clase rollover. Si esta página se ve con cierta transparencia, tiene que ser por otro motivo, porque no lo tengo instalado.
El problema tiene que ser otro.
Hola de nuevo. Me gustaría saber como sustituir el enlace "Leer más" por una imagen con efecto "hover".
Saludos y gracias.
Andrés, este post es aplicable a lo que quieres.
Tendrás algo con esta estructura
<a href='URL_ENLACE'>Leer Más</a>
Tendrías que definir la clase ROLLOVER tal y como se explica y luego insertar en la etiqueta A, la clase. Por último, sustituyes "Leer Más" por
<img sre='URL_IMAGEN'/>
Si quieres probar con otros tipos de rollover, echa un vistazo al post Botones en movimiento
¿Y por dónde queda la etiqueta A?
He intentado hacerlo con un código en base a las modificaciones de clase que he entendido necesarias tras leer, leer y leer el post, he pulsado "Vista previa" y ni aparecía la imagen deseada ni siquiera el enlace originario. En lugar de ambas sólo un espacio vacío y en blanco.
A ver si me puedes decir donde he fallado. Es que no soy muy ducho en estos temas, como comprobarás...jejeje.
En algún lugar de tu plantilla tienes incorporado el código del "Sigue Leyendo". Tendrá la estructura antes comentada. Para sustituir la frase por una imagen, tendrás que cambiarla para que se quede como
< a class='rollover' href='URL_ENLACE'><img src='URL_IMAGEN'/></a>
Creo que antes de seguir, deberías ver este otro post sobre enlaces.
Gracias, Oloman. Es fantástico lo bien que funciona el invento sin tener que usar más imágenes.
PUBLICAR UN COMENTARIO