CSS İle Rollover Image

Rollover image fare hareketi ile değişkenli resim oluşturmak için kullanılır. Bunun için 2 tane buton gereklidir. Anlatımımda "Anasayfa" için butonlar oluşturdum ve onları kullanıcam. Sizde kendinizce değiştirebilirsiniz. Bunu vBulletin'e nasıl uyarlayabileceğinizi anlatıcam.

Kullanacağımız Butonlar

2. butonu değişken olarak kullanacağım.

İlave CSS bölümünüze ekleyin ;

a.anasayfa {
   background:url(images/anasayfa.png) no-repeat;
   display:block;
   text-indent:-9999px;
   height:50px;
   width:50px;
   }
   a:hover.anasayfa {
   background:url(images/degisken.png) no-repeat;
   )

Böylece <a class="anasayfa"> tagımızı şekillendirmiş olduk.

Şimdi gelelim bunu nasıl kullanacağımıza..

<a class="anasayfa" href=index.html title="Anasayfa"></a>

Kodunu kullanmak istediğimiz her yerde kullanabiliriz.
Not: Kullanacağımız resimlerin 50*50 boyutunda olmayabilir. Eğer farklı resimlerle çalışacaksanız css kodundaki ;

   height:50px;
   width:50px;