CSS İle Rollover Image ( Fare Hareketi İle Resim Değiştirmek )

CSS İle Rollover Image
vbulletin-tr.com - CSS İle Rollover Image ( Fare Hareketi İle Resim Değiştirmek )
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.

Kullanacağımız Butonlar

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

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

PHP- Kodu:

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..

PHP- Kodu:

<a class="anasayfa" href="index.php" 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 ;

PHP- Kodu:

   height:50px;
   width:50px; 


bölümünü düzenleyin.
Kullandığım resimleri psd leri ile upload ettim. İşinize yararsa kullanabilirsiniz.

[zekmek]

güzel, teşekkür ederim. çok şık menüler yapılır

[Erdy||]

Rica ederim

[By.joJi]

güzel kanka sağol

[Erdy||]

Rica ederim kanka (: