Rápidos rollovers con CSS

22/nov/2005 30

Cuando hacemos un rollover, lo usual es tener 2 o más imagenes cortadas iguales, pero con diferentes estilos (otro color, forma, sombra, etc) y cuando construimos el código que la hace funcionar, se usa comunmente:

#menu a {
     background: url("boton.gif") top left no-repeat;
}
#menu a:hover {
     background-image: url("boton_over.gif");
}
#menu a:active {
     background-image: url("boton_activo.gif");
}

A continuación, muestro una manera simple de ahorrar la carga de la imagen (gif o jpg). En realidad no es magia lo que haremos, solamente un truco que en vez de cargar una nueva imagen al hacer el hover, se trabajará por sobre una misma imagen, la que contendrá todas las instancias necesarias. Entonces lo bueno es que esta imagen se cargue completa la primera vez, y al hacer el hover, ésta se desplazará lo necesario para que muestre donde se encuentre la parte correspondiente a esa istancia; lo mismo si tiene un active. Pero le agregaremos algo más.

botones rollover

Un sólo GIF, el que contiene las 3 instancias necesarias: link, hover y active

OK, entonces usaremos la imagen arriba para que el botón muestre sus 3 instancias. Lo bueno es que se cargará sólo la primera vez (cuando se cargue el sitio completo), y cuando llamemos a otra instancia, esta imagen la desplazaremos los pixeles necesarios (a la derecha o izquierda) para mostrar la gráfica correspondiente. El código, a continuación:

#menu a {
     background: url("boton_rollover.gif") 0 0 no-repeat;
}
#menu a:hover {
     background-position: -150px 0;
}
#menu a:active {
     background-position: -300px 0;
}

Ahora, un pequeño detalle que se ha encontrado en esto, es que ciertos browsers han mostrado (IE Win) una demora en este desplazamiento del background, por lo que en este lapsus ninguna imagen es desplegada (el tiempo es muy poco, pero igualmente se nota y molesta visualmente). Para solucionar esto, solamente se integrará un div interior, el q contendrá un background con la misma imagen del boton. Así, cuando ocurra este espaciado, no quedará en blanco la instancia y mostrará siempre de fondo el botón:

#menu {
     background: url("boton_rollover.gif") 0 0 no-repeat;
}

* Esto funciona con todos los browsers que soportan CSS2 ( Firefox, Opera, IE, Safari etc).

Ver ejemplo final.

El código completo quedaría así:

#menu {
     margin: 0;
     padding: 0;
     width: 150px;
     height: 40px;
     text-align: center;
     background: url("boton_rollover.gif") 0 0 no-repeat;
}
#menu a {
     padding-top: 6px;
     width: 100%;
     height: 100%;
     display: block;
     overflow: hidden;
     font-family: Georgia, "Times New Roman", Times, serif;
     color: #333333;
     font-weight: bold;
     font-size: 24px;
     text-decoration: none;
     background: url("boton_rollover.gif") 0 0 no-repeat;
}
#menu a:hover {
     background-position: -150px 0;
}
#menu a:active {
     background-position: -300px 0;
}

Comentarios

  1. Juglar :: Efectos con imágenes y CSS :: August :: 2005 [#]

    […] CSS Lab » Rápidos rollovers con CSS Caótico Neutral: Rollovers con CSS Programación.com: Menú de imágenes con CSS Afficher Masquer des calques sans javascript Affiche-image Cool CSS Image Pop-up Remote Rollovers CollyLogic Scroll-Fade Moryson.net – CSS Image Map CSS Image Maps, Redux – Flickr-like Technique? stu nicholls | CSS sliding photo-gallery StopDesign: Double Rollover Effect A List Apart: (1), (2), (3), (4) Alsacreations: (1), (2), (3), (4) Stu Nicholls: (1), (2), (3) Interactive image gallery CSS Image Maps CSS-only Image Annotation WebReference.com – Photographic Gallery Using CSS CSS image maps it’s a dogs life CSS: Using a list item to create a star rater Annotating images with CSS Experiments with wide images | clagnut/sandbox stu nicholls | CSS PLaY | image map for detailed information Liquid Image […]

  2. Bane [#]

    He estado viendo este codigo y varios otros y mi gran problema ha sido pensar si funcionan con botones que se despliegan de manera horizontal, es posible esto pues por mas que he tratado no me ha resultado.

  3. Administrador [#]

    a q te refieres con despliegue horizontal, tienes alguna url de ejemplo?? ahi podria ayudarte con el codigo…

  4. Bane [#]

    Tengo un sitio en el que tengo un menu que esta desplegado de manera horizontal y no he sabido como hacerlo con rollovers usando CSS.
    El sitio es http://www.escritorasyescrituras.com

    El drama que tengo es que si creo la opcion display:block la imagen siguiente se me va para abajo, lo cual es ideal para un menu cuyas opciones estan dispuestos de manera vertical, espero tengas algun CSS que me ayude en ello.

    Gracias

  5. Administrador [#]

    uff dame un poco de tiempoy te veo tu problema. tienes el codigo con q estabas trabajando?? deberia funcionar lgual, haciendo un div para cada elemento del menu…..

    publica tu codigo en los foros, por si mas de alguien te puede ayudar.

    saludos.

  6. Christopher C. [#]

    Para lograr hacerloen un menú horizontal y que se te vayan para bajo cada nuevo botón, es utlizar el comando css

    display: inline;

    para la clase que define las propiedades li, puedes ver un ejemplo en:
    http://www.comucom.com, web que desarrollo.

  7. Charly_75ar [#]

    Hola. Estuve probando el rollover y funciona de maravilla salvo un detalle. No me cambia la posición en el a:active ni en Firefox ni en IE. Que puede ser?

  8. CSSLab Admin [#]

    charly, revisa bien el codigo pues debe de tener algun detalle (espacio, :, lo q sea) pues lo he probado y si funciona bien en todos los browsers. suerte.

  9. RiC@ [#]

    Facil y sencillo, pero a mi no me funciona la instancia active

  10. LUIS [#]

    TA CHEVERE ESTE CODIGUITOOO…

  11. Calila [#]

    Hola..
    Gracias por tu tutorial, ha sido de mucha ayuda…
    Sabes que yo lo estoy aplicando en una pagina que estoy ahciendo.
    Pero el problema es que en el IE6, las imagenes las vuelve a cargar una y otra vez, y hay momentos cuando uno pasa encima el mouse que se desaparecen y es ahi cuando vuelve a cargarlas.
    No se si habrá alguna forma de solucionarlo que puedas ayudarme.
    El sitio es http://www.itaustral.com
    Gracias.

  12. CSSLab Admin [#]

    Calila, en mis pruebas no note ese problema, lo q si vi es q las instancias del GIF no quedaron bien alineadas y se nota en el :hover. lo siento no ayudarte mas.

  13. Calila [#]

    Si loque pasa es que como recurso desesperado mientras busco como solucionarlo, le coloque debajo una imagen completa de fondo con los botones.. y ese no me quedo muy bien alineado
    Gracias igual por tu respuesta

    Saludos

  14. fernando [#]

    Podrias poner un tutorial paso a paso desde cero como creaste este meú por favor soy principiante en css2, no me sale este menú no se loas pasos a tomar por favor inserta un video tutorial de menus creados en css2 no hay por ningun lado, grabalo en camtasia studio.

    Te agredeceria un mundo :)

  15. CSSLab Admin [#]

    fernando: en el videocast1 una parte de el muestro como crear estos menues de cero, te sugiero lo veas y escuches atentamente. lamentablemente no tengo todo el tiempo del mundo para andar grabando videocasts de todo. pero lo tendre en cuenta, salu2.

  16. Fernando [#]

    Me parece genial voy a esperar el videotutorial con ancias un saludo;0, tus tutoriales estan geniales

    Tomate un tiempito para realizar el videotutorial para crear menus verticales y horizontales en css2 😀

  17. Fernando [#]

    Que paso con el video tutorial de css2 creación de menus todavia lo estamos esperando :(

  18. » Botones redondos y livianos | CSSLab [#]

    […] el efecto del :hover, utilizaré la técnica del rollover rápido mostrado en un artículo muy anterior. Es importante notar que el :hover se debe hacer tanto […]

  19. inyaka [#]

    muy buena la idea felicitaciones, por cierto :( me gustaba mas el antiguo template

  20. Luis Alberto Cao [#]

    Hola, en alguna parte del HTML habrá que poner el active,
    porque si cambio de página se olvidará del active ¿ no?

  21. Prod9 - Rollovers sin parpadeos en CSS [#]

    […] trackback de nuestro pequeño espacio y primera anotación sobre CSS. Navegando CSSLab descubro una magnífica solución a uno de los problemas que más me han molestado siempre a la […]

  22. condo insurance [#]

    condo insurance…

    receives imaginings exclusivity interim queried cleaver …

  23. Saul [#]

    Hola, he logrado hacer los menus pero ahora me pregunto como hago los links a los menus? Cuando quiero poner informacion en alguno de los enlaces se me van los datos como si fuera un nuevo post.

  24. Jorge Epuñan [#]

    Saul, porfavor se mas especifico, o adjunta un link para ver q te esta sucediendo. Te recuerdo q los foros tb pueden ser de ayuda si quieres agregar el codigo en q estas entrampado.

    Saludos.

  25. @r@mis [#]

    no me trabaja el active en el iexplorer 7
    pero con el Firefox si q puede ser

  26. Tavo [#]

    Una consulta y como hacer asi como tenes vos tus comentarios y tus trackbacks? yo necesito hacer uno asi

  27. Jorge Epuñan [#]

    Tavo: creo q los menues horizontales son lo q necesitas.

  28. Menú horizontal y algo + « [#]

    […] rollover, ya q he recibido la inquietud de parte de Bane de cómo aplicar el artículo anterior ‘Rápidos rollovers con CSS‘ en este tipo de despliegue. Vayamos al […]

  29. Menú horizontal y algo + ↝ CSSLab [#]

    […] he recibido la inquietud de parte de Bane de cómo aplicar el artículo anterior ‘Rápidos rollovers con CSS‘ en este tipo de despliegue. Vayamos al […]

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab