Cargar img del hover

[Jessi11]

Buenas, tengo una pregunta con respecto al a:hover en los botones del menú de mi sitio:
Mi problema es que cuando pongo pongo el ratón sobre uno de los botones, la imagen que seria del a:hover tarda unos segundos en cargar, y yo lo que quiero es que apenas pongan el ratón sobre el botón enseguida aparesca la imagen del hover y no que se demore en cagar.
Alguno sabe como puedo hacer para que el hover de mi botón cargue antes y no cuando pongo el ratón encima?

Dejo un ejemplo de como hago yo el botón de mi menú.

Código HTML:

<div id="nosotros">
   <a href=""></a>
</div> 

Código:

div#nosotros a:link {
	display:block;
	background-image:url(../images/boton_nosotros.png);
	background-repeat:no-repeat;
	height:114px;
	width:168px;
	float:left
} 


div#nosotros a:hover {
	background-image:url(../images/boton_nosotros_hover.png);
	background-repeat:no-repeat;
	height:112px;
	width:168px;
	float:left;
}

Muchas Gracias!

[dual3nigma]

Usa sprites, osea junta las dos imagenes en una, y con background-position la manipulas para que se muestre la parte que quieres, deberias investigar mas sobre el tema de "css sprites", de esa forma no solo te evitas el que aparesca un "hueco" si no que optimizas la descarga de tu sitio al hacer menos solicitudes HTTP.

[Jessi11]

Muchas Gracias! ya me funcionó.