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
<a class="ResimDegis" href="#">Resim Degis</a>

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.
June 12, 2009
Ayberk Atasay
CSS
4 yorum