Como eliminar el parpadeo en botones

[MSucasas]

Hola gente, tengo un problema que no consigo solucionar. Al pasar el cursor con cierta rapidez sobre los botones de mi web estes parpadean. Que puedo hacer? Gracias.

[rege]

Si te refieres a hacer rollover sobre un botón que tiene un background-image distinto para el estado en reposo y al estado hover, entonces en ie a veces parpadea porque tarda un poco en cargar la imágen del hover.

Para evitarlo, sólo debes poner esas 2 imágenes en un mismo archivo, así cuando se cargue la página ya se cargará toda, y luego en el css, lo posicionas con background-position,
por ejemplo, si en la imagen boton.gif tienes el estado normal arriba, y el hover debajo seria:

Código:

.btn{
display:black;
width:100px;
height:40px;
overflow:hidden;
background:url(img/boton.gif) left top no-repeat;
}
.btn:hover{
background-position: left bottom;
}

Espero te sirva.

[Sanchy_com]

Deberías poner el codigo, de otra manera solo podemos adivinar y en la mayoría de los casos te estaremos dando respuestas incorrectas

[lvfp]

Bueno, yo creo que esta vez es una pregunta genérica, no hace falta código para responderla.

La forma es como te dice rege.

Para rizar el rizo lo mejor es poner todos los estados de los botones en un único archivo, y las imágenes en diagonal, de forma que puedas ampliar tanto horizontal como verticalmente y no aparezcan los otros estados de los botones.

[Sanchy_com]

Iniciado por lvfp

Bueno, yo creo que esta vez es una pregunta genérica, no hace falta código para responderla.

La forma es como te dice rege.

Para rizar el rizo lo mejor es poner todos los estados de los botones en un único archivo, y las imágenes en diagonal, de forma que puedas ampliar tanto horizontal como verticalmente y no aparezcan los otros estados de los botones.

A no se necesita el codigo? Mira como empieza la respuesta de rege:

"Si te refieres a....."

y que tal si no se refiere a eso?

Pensar antes de hablar, sobre todo antes de desmerecer y dar karma negativo a alguien que esta queriendo ayudar. El codigo siempre es necesario, siempre aporta

[ZoroRoronoa]

Esto lo solucionas con el "efecto rollover con CSS sprites" :))
Saludos.

________________________

"Si te refieres a....."

y que tal si no se refiere a eso?

Pensar antes de hablar, sobre todo antes de desmerecer y dar karma negativo a alguien que esta queriendo ayudar. El codigo siempre es necesario, siempre aporta

Bueno, haber Sanchy_com, nosotros nos "REFERIMOS A...", y tu a que te refieres???
Es algo logico lo que le pasa a este usuario, el efecto del rollover, que parpadea por que aun no a cargado la imagen del rollover.

O acaso a ti se te ocurre otro problema que no sea el "rollover", cuando el usuario, ha especificado el "parpadeo".
Si es asi, dinos que "otro posible" problema, pudiese ser.

Saludos. (Y es nefasto eso de que den karma negativo y entonces regresas karma negativo)

[ArturoGallegos]

Iniciado por ZoroRoronoa

Esto lo solucionas con el "efecto rollover con CSS sprites" :))
Saludos.

________________________



Bueno, haber Sanchy_com, nosotros nos "REFERIMOS A...", y tu a que te refieres???
Es algo logico lo que le pasa a este usuario, el efecto del rollover, que parpadea por que aun no a cargado la imagen del rollover.

O acaso a ti se te ocurre otro problema que no sea el "rollover", cuando el usuario, ha especificado el "parpadeo".
Si es asi, dinos que "otro posible" problema, pudiese ser.

Saludos. (Y es nefasto eso de que den karma negativo y entonces regresas karma negativo)

compañero @ZoroRoronoa recuerde que en un sitio web puede haber infinidad de cosas que pueden afectar a los elementos, desde un simple css hasta como has estructurado tu html... quizás un javascript, un concepto erróneo al utilizar las propiedades y elementos dentro del código etc etc.

el efecto rellover quizás es una cosa bastante común y se dispara esa idea para dar respuestas pero no por ello implica que sea acertada... en esta caso resulto ser.

y hasta el momento el compañero @MSucasas no ha regresado para indicarnos si era o no su problema.

[MSucasas]

Perdonarme gente, he estado fuera de casa unos días y no me a sido posible seguir el hilo. Aun no e conseguido arreglar el percance llamado "rellover".
Aquí os dejo el código:

a#boton{
width:120px;
height:36px;
background-image: url(.......jpg);
background-repeat: no-repeat;
background-position: right center;}

a#boton:hover{
background-image: url(.......jpg);
background-repeat: no-repeat;
background-position: right center;}

Muchas gracias. Un saludo.

[ArturoGallegos]

a#boton{
width:120px;
height:36px;
background-image: url(.......jpg);
background-repeat: no-repeat;
background-position: right center;}

a#boton:hover{
background-image: url(.......jpg);
background-repeat: no-repeat;
background-position: right center;}

dado que no indicas el nombre de la imagen y en ambos aplicas el mismo position, me imagino que tienes dos imágenes para tal efecto, tu problema se soluciona usando sprites CSS, osea coloca las dos imágenes en una sola

[MSucasas]

Tengo dos imagenes para crear el efecto pulsado del botón. ¿Como coloco las dos imagenes en una sola? Gracias

[ArturoGallegos]

con un editor de imágenes crea un archivo del doble de alto y arriba colocas una imagen y otra abajo

y en tu css coloca por decir

Código CSS:

a{background:url(imagen.jpg) top right;}
a:hover{background:url(imagen.jpg) bottom right;}
 

[lvfp]

Caray como se mueve esto.

Sanchy, sin meter más lío, por supuesto que todo es susceptible de fallar por mil motivos, pero
esta pregunta está más clara que el agua y tu respuesta parecía de un robot que automáticamente pide código pregunten lo que pregunten.

SI pregunta ¿como se pone color de fondo a un div?, seguro que el otro día le hubieras pedido código ja,ja.

Y repito, lo mejor meter todos los estados de todos los botones en un solo archivo y las imágenes en diagonal de derecha a izquierda.


Saludos.

[Alucine]

que interesante la técnica de los dos botones en un archivo! la voy a probar. tiene un nombre esa técnica?.

[ArturoGallegos]

la técnica la puedes encontrar en google como CSS sprites, ya es muy conocida y muchos sitios la utilizan

[Alucine]

aaaaaaaaaaaaaah pensé que sprites se refería a otra técnica... ok ya voy entendiendo jaja :)