Titreyen ve titremeyen buttonlar :

Sayfalarımızı tamamen css ile şekillendirmediğimiz zamanlarda hover yapan resimleri Javascript ile oluştururduk, hatta Dreamweaver'ın bu iş için kullanabileceğimiz hazır butonları bile vardı , ama artık bu tip resimler kullanmaya çalıştığımızda sayfadaki değişen resimlerde gecikmeler oluyor ve preloadign fonksiyonları da eskisi gibi çalışmıyor. Css ile background imageı değiştirdiğimizde ise yine resimlerin yüklenmesi sorunu yüzünden butonlarda titremeler oluyor, bilinen en basit yüklem yüklenmesi gereken resimleri visibility:hidden tagı ile resimleri sayfada bir köşeye atmak , ama geçerli çözüm bu değil, css nin background-position parametresi ile bu sorunu daha kalıcı olarak halledebilirsiniz, yapmanız gereken butonun her iki halini de içeren bir resim oluşturduktan sonra hover biçiminde background resminin pozisyonunu yüklenecek olan resmin posizyonuna almak.

Buyrun Örnekler:

Titreyen javascript buton
Javacrip ile oluşturulmuş buton, resimler geç yüklendiği için hover geç oluşuyor. 

Resim1  Resim2


Css ile background image değişimi ile oluşturulmuş buton , resim yüklemesi zaman aldığından titreme oluşuyor. css kodu : 
.tbutton {
background:url(images/tc1.jpg);
width:174px;
height:50px;
}
.tbutton:hover{background:url(images/tc2.jpg);}

Resimler : Resim1  Resim2


Css ile background-positon değiştirilerek oluşturulmuş buton, sayfa yüklendiğinde aslında tek bir resim olan butonun her iki hali de yüklenmiş olduğu için herhangi bir gecikme yada titreme yok. 

.titremeyen {
background:url(images/titremeyen.jpg);
width:174px;
height:50px;
}
.titremeyen:hover{ background-position:0 -50px;}

Resim :Resim

meteryus.com