Resmin üzerine gelince değişmesi ? ?

Merhaba arkadaşlar. Yeni bir site açtım anasayfa indexinde butonların üzerine gelince buton resminin değişmesini istiyorum bunu şu kodla yaptım

<a href="http://*******com"><img src="images/index_14.jpg" width="205" height="33" border="0" onMouseMove="this.src='images/index_14_14.jpg'" onMouseOut="this.src='images/index_14.jpg'"  /></a>

ama böyle olunca 2. resmin yüklenmesi 2-3 saniyeyi, bazı tarayıcılarda ise 5-6 saniyeyi alıyor. Bunu daha hızlandırmak için başka yollar var mı acaba ?

rollever bu kodlar , resmin boyutuna göre yüklenme hızıda değişir , resmin boyutu kücük olmalı yani 854 kb bi resim geç açılabilir en az 400 500 kb olması gerekki hemen açılabilsin.

Css ile yapılabilir, örnek vereyim.

Css kodları:
Kullanımı:
Yanlış hatırlamıyorsam w3'de de sorun çıkartmıyordu. Bu şekilde daha pratik olunabilir, daha önce birkaç sitemde kullanmıştım. Eğer mantığı kavrayamazsan ufak bir index hazırlayıp eklerim.

Eklerseniz çok sevinirim css bilgim pek yok

Ufak bir şey hazırladım, aşağıdaki linke tıklayarak inceleyebilirsin. Kaynağı görüntüleyip index.html dosyasına bakarsın ve aynı zamanda style.css dosyasına tıklayıp css içeriğini görebilirsin, gerisi sana kalmış. W3'den de sorunsuz geçiyor.

Demo

çok teşekkürler işime yaradı

son örnek işinizi görmez. dosya boyutu ne kadar küçük olursa olsun yine de http request yaparken kısa da olsa bir bekleme olacaktır.

bunu bertaraf etmek için sayfa ilk yüklendiğinde js ile o img i catch e yükletmek ya da css sprite kullanmak

css sprite öneririm tabii ki. internet üzerinde araştırırsanız çok sayıda kaynak bulabilirsiniz

css sprite'ı baya iyi kullananlar var tüm resimleri tek dosyadan çeken siteler var

jQuery hakkında bilginiz varsa preload(); öneriyorum. Onun dışında Google'da "javascript resim preload" yazarsanız daha detaylı bilgiye ulaşabilirsiniz. Daha kapsamlı bilgilere ulaşmak isterseniz mutlaka "preloading images" şeklinde aratınız.