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.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
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
ResponderEliminarGracias...
Hola.
ResponderEliminarMe 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!
ResponderEliminarMedecrece, 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.
ResponderEliminarOloman, como estas.
ResponderEliminarQuiero saber como hiciste ese favicon como gif, esta buenisimo... gracias
Gracias Oloman
ResponderEliminarBueno Alexis en los enlaces podrás encontrar respectivamente cómo crear imagenes animadas y cómo poner el favicon creado en el blog.
ResponderEliminarSaludos
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..."????
ResponderEliminarGracias
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
ResponderEliminarMe parece entender que quieres un resumen de entradas adicional a lo que ya tienes.
ResponderEliminarNormalmente 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?
ResponderEliminarEs 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.
ResponderEliminarEl 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".
ResponderEliminarSaludos y gracias.
Andrés, este post es aplicable a lo que quieres.
ResponderEliminarTendrá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?
ResponderEliminarHe 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
ResponderEliminar< 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.
ResponderEliminarOloman te quisiera hacer una consulta, tengo problemas con Rollover, no puedo insertar varias imágenes con Rollover, la verdad que cuando inserto más de una imagen rollover se me hace un terrible caos.
ResponderEliminarEspero que me puedas solucionar este problema.
Gracias.
De: Facundo de la Vega (Argentina)
Facundo, supongo que te refieres al código que se explica en primer lugar en este enlace. Si es así, sólo tienes que tener cuidado cuando lo aplicas a más de un botón por página.
ResponderEliminarCuando allí cito la expresión IdentificadorUnico, quiero decir que tienes que usar un conjunto de caracteres (boton1, 2341, primer, etc.) único para cada efecto rollover. Si utilizas el mismo para varios que aparecen en la misma página, entonces el intérprete se hace un lío.
O sea, hay que usar el mismo identificador para cada par de imágenes que forma el efecto, pero el de cada par, tiene que ser distinto del de otro par.
Si aún así no te aclaras, prueba con el segundo sistema del mismo enlace, en el que se utiliza una sola imagen y no se necesitan IDENTIFICADORES ;)
Muchas Gracias Oloman!. Lo intentaré
ResponderEliminarMuchas gracias!!
ResponderEliminarMe ha gustado más este efecto que el autentico rollover, y a pesar de ser más sencillo, es igual de bonito y más facil de aplicarlo. En cambio con el otro rollover, hay que preparar las imagenes... T-T
ResponderEliminar