Rollover de imagenes con css
- Jun
- 09
8 comentarios! 205 palabras - 1 hits
una de las tecnicas para sustituir el texto de los enlaces por imagenes que mas suelo utilizar
Esta no es ninguna técnica novedosa, pero siempre viene bien recordar estas cosas. Para mi es uno de los métodos mas limpios y efectivos de crear un efecto “rollover” sin tener que hacer precarga de las imagenes.
A rasgos generales la idea es muy simple, para reemplazar el texto del enlace utilizamos una imagen que contenga los dos estados que vamos a decorar, el normal y el que aparece al pasar por encima el cursor (a:hover). Para conseguir el efecto mantendremos oculta una parte de la imagen utilizando las propiedades de width y height
Vamos a verlo en la practica, utilizo como ejemplo una imagen con 50px de ancho por 50px de alto, al enlace le asigno una id única id="replaced", y para la hoja de estilos incluiré las siguientes reglas
- a#replaced {
- display:block;
- width:50px;
- height:25px /* aqui esta el truco */
- text-indent:-9999px;
- background:url(/images/loquesea.png) top left no-repeat;
- }
- a#replaced:hover {
- background-position:0 -25px;/* con esto cambiamos la porcion de imagen que se muestra */
- }
Como podéis ver es una técnica bastante sencilla y que en teoría resulta accesible por todo tipo de navegadores, ya que no estamos incluyendo la imagen dentro del html lo que posibilita que los lectores de pantalla puedan leer el texto del enlace.
1 enlace
8 comentarios
# Escrito por Enrique hace 3 años, 9 meses
Tema muy hablado pero poco publicado, y sobre todo con “tanta” claridad… thx ;-)
# Escrito por leticia enriquez rosello hace 3 años, 1 mes
ME ENCANTARIA SABER MAS DE ESTE TEMA MIL GRACIAS POR HABER HECHO LA PAGINA DONDE PUEDO ENCONTRAR MAS INFORMACION
# Escrito por Jorge hace 2 años, 7 meses
Ya se ya se que ha pasado mucho tiempo desde este post :P Solo queria decirte que me ayudo mucho y por otro lado si te fijas antes del /* aqui esta el truco */ te falta la “;” Gracias y saludos! ;)
# Escrito por Antonio hace 2 años, 6 meses
Pues macho, a mi no me sale, o yo soy muy torpe o algo no funciona.
Aunque la idea general está muy bien creo que no esta muy explicado. Tal vez vendría bien comentases que hace cada parte del código css.
# Escrito por Diezko hace 1 año, 9 meses
Muy claro gracias!
Por cierto te sobra un Div de cierre en la pagina del ejemplo. Solo para molestar. :)
# Escrito por josh hace 8 meses, 2 semanas
gracias!! excelente
# Escrito por Anonymous hace 7 meses, 3 semanas
Gracias por el truco, lo necesitaba para la nueva versión de mi sitio. Saludos!
# Escrito por Diseño Web hace 1 mes, 2 semanas
Me ha sido de gran utilidad este sistema, muchas gracias!!