A veces no carga la imagen para el hover del link , alguna solucion???

richicasas · #1 (**permalink**) 08/10/2009, 21:30

Hola a todos, resulta que tengo un link el cual tiene una imagen de fondo, aparte tengo otra imagen con caracteristicas similares para que se muestre en el a:hover, pero hay veces quedicha imagen como que no carga , pongo el puntero del mouse en el link y se me queda en blanco y no sale la imagen, alguien me podria ayudar a solucionar esto???, muchas gracias.

deirdre · #2 (**permalink**) 08/10/2009, 22:00

Pero, ¿te funciona en máquina local?. ¿Sólo te produce error si está online?

Puedes poner tu código para intentar ayudarte?

Bye

richicasas · #3 (**permalink**) 08/10/2009, 22:06

Código PHP:

  a,  a:link{

    background:url(../images/imagen1.gif) top no-repeat;

    display:block;

    height:197px;

    text-align:center;

    font-size:16px;

    padding-top:10px;

    color:#FFFFFF;

}

 
 a:hover{

    background:url(../images/imagen2.gif) top no-repeat;

    color:#0B8507;}

richicasas · #4 (**permalink**) 08/10/2009, 22:08

Funciona local bien, per en Internet hay veces no carga la imagen del hover, toca darle f5 para recargar la pagina.
PREGUNTA:

He visto en algunos proyectos que cuando manejan diferentes imagenes para el menu una para la opcion y otra para el hover , que las dos son una misma imagen y estan separadas, sera por eso?? porque yo las tengo separadas??

kseso? · #5 (**permalink**) 09/10/2009, 05:26

Utilizan la técnica que se conoce como sprite. La ventaja es que el cambio es instantáneo, ya que es la misma imagen que ya la tiene cargada y sólo la tiene que "mover".

Sprites + css

Un saludo

deirdre · #6 (**permalink**) 09/10/2009, 05:49

Hola richicasas

Tal como te dice kseso? esa técnica se denomina sprite, pero si ya tienes tus imágenes editadas y no quieres convertirlas a sprite puedes intentar forzar la descarga de todas las imágenes de tus hover, bien utilizando algún pequeño javascript de precarga de imágenes, o mejor aún, colocando las imágenes dentro de un div con display none al principio del código (justo después de <body>), tal que así:

Código HTML:

<body>
<div style="display: none">
<img alt="" src="ruta/imagen-hover-1.png" />
<img alt="" src="ruta/imagen-hover-2.png" />
<img alt="" src="ruta/imagen-hover-3.png" />
<img alt="" src="ruta/imagen-hover-4.png" />
<img alt="" src="ruta/imagen-hover-5.png" />
<img alt="" src="ruta/imagen-hover-6.png" />
etc
</div>
</body>

sacando el estilo a la hoja de estilo.

Bye

richicasas · #7 (**permalink**) 09/10/2009, 22:23

Muchas gracias, mejor hice sprite y las uni en una sola para que carguen bien, gracias por la ayuda.