Rápidos rollovers con CSS
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.
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).
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;
}
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.
a q te refieres con despliegue horizontal, tienes alguna url de ejemplo?? ahi podria ayudarte con el codigo…
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
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.
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.
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?
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.
Facil y sencillo, pero a mi no me funciona la instancia active
TA CHEVERE ESTE CODIGUITOOO…
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.
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.
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
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
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.
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
Que paso con el video tutorial de css2 creación de menus todavia lo estamos esperando
muy buena la idea felicitaciones, por cierto
me gustaba mas el antiguo template
Hola, en alguna parte del HTML habrá que poner el active,
porque si cambio de página se olvidará del active ¿ no?
Luis, no entendi tu duuda, la pseudo-class :active del se usa para la instancia en q el boton del mouse esta clickeado. si te refieres a :visited, a es cuando la pagina visitada queda en cache asi puedes saber si ya la visitaste o no, bueno viene por ti ponerla, yo nunca la ocupo. saludos.
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.
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.
no me trabaja el active en el iexplorer 7
pero con el Firefox si q puede ser
Una consulta y como hacer asi como tenes vos tus comentarios y tus trackbacks? yo necesito hacer uno asi
Tavo: creo q los menues horizontales son lo q necesitas.