Los efectos rollover nos permiten cambiar el formato de un vínculo cuando pasamos el cursor del ratón sobre ellos son muy conocidos:
Normalmente, se modifica el color, la fuente, se agregan o eliminan subrayados pero, sin embargo, las posibilidades no se agotan ahí ¿qué pasa si al efecto le agregamos una imagen?
| Blogger | Vagabundia |
Hacerlo es bastante simple, sólo necesitamos crear un GIF animado, en este caso, unos pocos frames de colores planos:
y luego, simplemente creamos una clase CSS que agregamos a la hoja de estilo, por ejemplo:
a.colores {
text-decoration: none;
font-weight: bold;
font-family: Georgia;
}
a.colores:link, a.colores:visited {
text-decoration:none;
font-size:26px;
color:#FF0000;
background-image: none;
}
a.colores:active, a.colores:hover {
background-image:url('URL_imagen');
color:#FF9933;
}Que utilizaremos de la siguiente manera:
<a class="colores" href="URL">Vínculo</a>
6 comentarios:
wow! se ve muy bueno el efecto!
quizá lo pruebe en mi blog.
Muy útiles tus consejos, nos vemos.
Gracias Eduardo, espero verlo implementado pronto :)
Supongamos que en vez de añadir un texto en enlace añadimos una imagen tipo botón, entonces el efecto que muestra es para el fondo. ¿Es así?
En principio, si. Todo dependerá de ambas imágenes y de que la "interior" (el texto o botón) sea más pequeña que el fondo, claro.
Hola!, una consulta.. en que parte del código debo agregar la clase de CSS que pones?, saludos.
Lo más sencillo es ponerlo antes de </b:skin>
Sino, puedes colocarlo antes de </head> entre etiquetas STYLE:
<style>
................. las propiedades
</style>
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...