Hola:
La única alternativa a javascript son los estilos, pero por algún navegador no te lo recomiendo...
La precarga básica es usando el objeto Image(), pero no est tan buen solución...
var imagen1 = new Image();
imagen1.src = "imagen1.gif";
var imagen2 = new Image();
imagen2.src = "imagen2.gif";
Y el uso es bastante parecido al que tienes:
<img src="imagen1.gif" onmouseover="this.src = imagen2.src" onmouseout="this.src = imagen1.src" />
Pero aún habiendo realizado la precarga, no siempre funciona... tal vez por el manejo de caché de los sistemas operativos, porque la parte teórica es correcta 8se trata de mi opinión)
Ahora, sin dejar de ocuparnos de javascript, te muestro una sustitución que realmente funciona... se trata de tener 2 imagenes, pero solo mostrar una...
<img src="imagen1.gif" onmouseover="this.style.display = 'none'; this.nextSibling.style.display = 'inline'" /><img src="imagen2.gif" style="display: none" onmouseout="this.style.display = 'none'; this.previousSibling.style.display = 'inline'" />
Debes tener cuidado de que ambas etiquetas img sean contiguas (que no halla ni un espacio en blanco)
Pruébalo y nos cuentas.
Saludos
