Bilgiler
  • Ekleyen:
  • Ayberk Atasay
  • Tarih:
  • June 12, 2009
  • Kategori:
  • CSS
  • Paylas:
CSS Uzerine Gelince Resim Degismesi

Arkadasimla yaptigimiz bir web sitesi icin menulerde kullanilmak uzere linklerimizin resim ve uzerine gelince de sekil degistirmesi gerekiyordu. Bunun icin ya JS yada CSS ile ozellik vermem gerekiyordu. Bende CSS tercih ettim.

Bunun icin tek resim ile bunu halletmek daha akillica. Cunku JS kullandigimiz zaman iki resim ayarlamamiz gerekir. Buda sayfada ikinci resmin aktifligi sirasinda yeniden yuklenmesini ve ziyaretcilerin sikilmasina yol acabilir (kendimden biliyorum).

Ilk olarak resim dosyamizi hazirlamamiz lazim. Ben soldaki gibi alt-alta bir resim hazirladim. Siz yan-yana hazirlayabilirsiniz.
Sayfamizda kullanacagimiz kodlar;

HTML
[mcode]<a class="ResimDegis" href="#">Resim Degis</a>[/mcode]

CSS
<style>
a.ResimDegis {
display: block;
width: 50px;
height: 50px;
background: url(ResimDegis.gif) 0 0 no-repeat;
text-decoration: none;
text-indent:-999px;
}

a:hover.ResimDegis {
background-position: 0 -50px;
}
</style>


ornek sayfayi gormek icin tiklayiniz.
Yorumlar
  • Eski Yorumlar:
  • sfenksmmy
  • Hocam Ellerinize Saglik Hos ve Ogretici Bir Calisma olmus Tesekkurler
  • 2009-08-26 18:54:14
  • mustafa
  • Paylasim icin tesekkurler
  • 2009-08-30 14:47:25
  • tayfun hakyemez
  • bunu menulerde kullana bilirmiyiz acaba
  • 2009-11-14 01:42:33
  • Akgenclik05
  • Cok sagolun uzun zamandir aradigim bir koddu..
  • 2010-01-02 22:43:44