Precargar imagenes cuando no puedes usar CSS Sprites

Hace un tiempo que comentamos por aquí la técnica de "ahorrar" espacios y memoria usando Sprites para nuestras imágenes. Pero... supongamos que no tenemos tiempo, o ganas, o medios, para poder confeccionar un sprite. Entonces... ¿que?.

Pues nos da una solución, que no por sabida, resulta menos útil, además solucionando el tema del cambio de tamaño de fuente, trevordavis. Y aquí tenéis el ejemplo:

Hover Over Me

Hover Over Me

Hover Over Me

Vamos a ver cómo se hace:

.- CSS:

p.spriteContainer {
background: url(http://trevordavis.net/wp-content/uploads/2008/11/sprite-hover.gif) no-repeat -9999px -9999px;
}
a.spriteVert {
background: url(http://trevordavis.net/wp-content/uploads/2008/11/sprite-off.gif) no-repeat top left;
padding-left: 30px;
}
a.spriteVert:hover {
background-image: url(http://trevordavis.net/wp-content/uploads/2008/11/sprite-hover.gif);
}

.- HTML:

<p class="spriteContainer"><a href="#" class="spriteVert">Hover Over Me</a></p>

<p class="spriteContainer"><a href="#" class="spriteVert spriteVert2">Hover Over Me</a></p>

<p class="spriteContainer"><a href="#" class="spriteVert spriteVert3">Hover Over Me</a></p>

Muy útil para elementos como los de las sidebares...