[SOLUCIONADO] Botón con imagen mouseover

[ecazorla]

Hola!

Lo primero me presento, ya que es mi primer post aquí, soy de Málaga (España), tengo 23 años y espero participar activamente :)

Tengo un botón que esta formado por una imagen que al hacer mouseover cambia gradualmente a otra imagen para hacer un efecto de seleccionado.
El codigo es:

Código:

#facebook{height:40px;width:40px;margin: 0 5px;background-image:url(../imagenes/iconos/facebook.jpg); transition:all 0.3s;float:left;}
#facebook:hover{background-image:url(../imagenes/iconos/facebook-over.jpg);transition:all 0.3s;}

<div id="facebook">
    		<a href="#"><span style="display:none">Facebook</span></a>
</div>

El problema es que al señalar el botón, durante una fracción de tiempo (dependiendo de la conexión) el botón desaparece ya que está cargando la otra imagen. Una vez que la ha cargado ya el botón funciona con normalidad y hace el efecto perfectamente.

Como puedo hacer para evitar eso? Hay alguna forma de que la imagen para el mouseover ya esté cargada desde antes de señalar el botón?

Gracias y un saludo!

[fegm_4]

Puedes trabajar con un sprite, así cuando la persona pase el mouse a traves de la foto, ya la imagen ha sido cargada.

Esta opción es de gran utilidad cuando utilizas muchas imagenes de tamaño fijo. Solo cambiarias el background-position

[ecazorla]

Gracias! Ha funcionado usando sprites :) no se me había ocurrido la verdad...
Lo unico malo es que yo tenia un efecto de transition, que al aplicarse a background-image hace un efecto de "fade" que es el que a mi me interesaba pero al aplicar el efecto sobre el background-position hace un efecto de movimiento... pero bueno está bien.

Un saludo y gracias