Parpadeo Blanco

christianphp · #1 (**permalink**) 30/09/2010, 15:52

Hola amigos tengo un problema que me viene molestando de hace rato, me parpadea el hover, parpadea en color blanco pero solo sucede una vez al cargar por primera vez la página...

Despues queda bien es como que no me reconoce al principio que tiene una imagen hover y me sale un color blanco y luego si funciona bien quiero arreglar esto.

El CSS esta puesto en un campo tipo LOGIN

Código:

}  
.inputadmin {
    border: none;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    color: #FF6600;
    padding: 2px 3px;
    background-image: url(mensd/admin1.png);
    width: 254px;
    height: 63px;
}
.inputadmin:hover {
    border: none;
    background-image: url(mensd/admin2.png);
    width: 254px;
    height: 63px;

ME PASA EN LOS 2 NAVEGADORES: FIREFOX E IE 7

Si a alguno le pasò y me puede dar una mano agradeceria

SALUDOS Y GRACIAS DE ANTEMANO !

ArturoGallegos · #2 (**permalink**) 30/09/2010, 16:36

esto te pasa porque el archivo esta algo pesado y tarda en cargarlo, una posible solucion es en lugar de utilizar dos imágenes (admin1.png y admin2.png) utilizar una sola (admin.png)

por ejemplo tu boton mide 254 x 63px crea una sola imagen de 254 x 126px en la parte superior colocas la imagen admin1 y abajo admin2

y para obtener el efecto con el hover el estilo seria algo así:

Código CSS:

Ver original.inputadmin {
    border: none;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    color: #FF6600;
    padding: 2px 3px;
    background: url(mensd/admin.png);
    width: 254px;
    height: 63px;
}
.inputadmin:hover {
    border: none;
    background: url(mensd/admin.png) 0 -63px;
    width: 254px;
    height: 63px;
}

christianphp · #3 (**permalink**) 06/10/2010, 20:25

No me funciona pongo ms código .

este es el input:

<input name="password" type="password" class="input2" id="password" "style="border:none" />

Código:

}  
.input {
    border: 0px;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    color: #FF6600;
    padding:2px 32px;
    background-image: url(mensd/botonlogin.png);
    background-repeat: no-repeat;
    width: 75px;
    height: 22px;
}
.input:hover {
    border: 0px;
    background-image: url(mensd/botonlogin2.png);
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    width: 75px;
    height: 22px;
}

Con los demas CSS botones con imagenes no me pasa el problema: ejemplo que me funciona bien, ese es con ID.

<div id="lista" align="center">
INICIO
</div>

Y el CSS:

Código:

#lista {
    width: 257px;
    display: block;
    font-style: normal;
    font-size: 14px;
    font-weight: bold;
    line-height: 1px;
    color: #CCCCCC;
    text-align: center;
}
#lista a{
    width: 200px;
    height: 32px;
    font-style: normal;
    font-size: 14px;
    font-weight: bold;
    line-height: 31px;
    color: #CCCCCC;
    text-align: left;
    outline-style:none;
    display: block;
    list-style-type: none;
    text-decoration:none;
    background-image:url(mensd/boto1.png);
    background-repeat: no-repeat;
    padding-left: 41px;
    padding-right: 12px;
}
#lista a:hover{
    font-style: normal;
    font-family:Verdana,Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bolder;
    color: #006699;
    background-image: url(mensd/boto2.png);
}

Hay alguna manera de poner un a:hover al otro CSS, me aprece que ahí está el problema aunque tengo muchas dudas y ya hace meses vengo con lo mismo y no encuentro solución

Espero alguna ayuda gracias de antemano por su tiempo

masterojitos · #4 (**permalink**) 06/10/2010, 20:46

has oido de las precargas de imagenes ??

Solo debes poner un pequeño codigo javascript, asi de esta manera cuando se active el hover, ya este cargada la imagen y no parpadee como dices.

Tu codigo seria algo asi:

Código Javascript:

Ver original<script type="text/javascript">
imagen = new Image();
imagen.src = "mensd/botonlogin2.png"; //la ruta de la imagen que quieres pre cargar.
</script>

Suerte

christianphp · #5 (**permalink**) 06/10/2010, 21:32

Perdon mas arriba tengo un error:

<input name="password" type="password" class="input2" id="password" "style="border:none" />

en vez de input2 es input así:

<input name="password" type="password" class="input" id="password" "style="border:none" />

Sigo con el problema, gracias por tu ayuda Master, pero esto me tiene loco !

El problema es al pasar por primera vez, el mouse por encima hay algun truco para que no pase esto, por ejemplo acá también me lo hace.

<div id="soclist" align="center"> <a href="https://twitter.com/website" target="_blank"></a> </div></td>
<td width="33" valign="top"><div align="center"></div>

Y el CSS:

Código:

#soclist {
    width: 32px;
    display: block;
    font-style: normal;
    font-size: 14px;
    font-weight: bold;
    line-height: 1px;
    color: #CCCCCC;
    text-align: center;
}
#soclist a{
    width: 32px;
    height: 32px;
    line-height: 31px;
    color: #CCCCCC;
    text-align: left;
    outline-style:none;
    display: block;
    list-style-type: none;
    text-decoration:none;
    background-image:url(socials/stwitter1.png);
    background-repeat: no-repeat;
    padding-left: 4px;
    padding-right: 1px;
}
#soclist a:hover{
    background-image: url(socials/stwitter2.png);
}

Ya no se que hacer me digeron antes que es por el peso, pero dendo está este es de solo 4 kb alguna otra sugerencia, gracias de antemano

masterojitos · #6 (**permalink**) 06/10/2010, 21:35

Pero no me respondiste si usaste el codigo que te pase o no

El codigo que te pase funciona muy bien y solo debes reemplazar la ruta de la imagen por aquella imagen que quieres precargar.

Comenta ^^

Dalvenjha · #7 (**permalink**) 06/10/2010, 21:36

Snple usa sprites -.- aprovechandote de la propiedad background position, lee algo al respecto podría ser por ejemplo:

#boton{
background-position: left top;
}

#boton:hover{
background-position: left bottom;
}

christianphp · #8 (**permalink**) 06/10/2010, 22:20

Muchisimas Gracias delvenjha , Master había probado el codigo pero mal

Ahora me funciona muy bien , con los scrips precargando imágenes, ahora bien a que se podría deber esto?

Pienso que por hacer el sitio medio pesado pero no lo está tanto, buee masomenos...

Hay algun límite de peso para los CSS ? al principio tenía el Styles principal de la web a 35 Kb, les parece pesado para un CSS?

Bueno gracias por las recomendaciones y he solucionado el problema con la precarga de imágenes !

Muchisimas gracias !

RabidFish · #9 (**permalink**) 06/10/2010, 23:37

Yo creo que 35 KB es bastante para un CSS, el más grande que tengo yo no llega ni a 7 KB. ¿Probaste alguna herramienta como Clean CSS? Te dejo el link: http://www.cleancss.com/
Si buscas "optimize css", "clean css" y demás en Google hallarás más herramientas de ese tipo que te ayudan a comprimir las hojas de estilo, no sólo quitando espacios innecearios, sino también para encontrar formas abreviadas de escribir los parámetros (colores, estilo de fuente...) o formatos repetidos..
Saludos.

Dalvenjha · #10 (**permalink**) 07/10/2010, 08:57

La precarga de imágenes es una mala praxis, pq tendrías que estar precargando todas las imágenes que quieres poner.

Usa Sprites y te irá mucho mejor.

Saludos

jomaruro · #11 (**permalink**) 10/10/2010, 02:32

Hola:

Cita:

Iniciado por Dalvenjha

Usa Sprites y te irá mucho mejor.

Totalmente de acuerdo, además sobrecargas menos el código.

Saludos.