CSS ile Rollover Image Mantığı

Tarih : 18 Nisan, 2009 ::
Kategori : CSS
:: Etiketler : CSS, Rollover Image

Genel olarak çalışmalarımızda rollover image’leri uygulamayı zenginleştirmek adına kullanırız. Rollover Image, bir imajın üzerine fare ile gelindiğinde, ilgili imajın değişmesi durumudur. Eskiden bu işlemi Javascript kullanarak gerçekleştiriyorduk. Bugün ise CSS kullanarak oldukça hoş rollover image’ler hazırlayabiliyoruz.

Arka Plan Değiştirme İle Rollover Image

Bu yöntem ile ilgili imajı, arka plan olarak ilgili XHTML elementine uyguluyoruz. Üzerine gelindiğinde ise CSS ile arka plan imajını değiştiriyoruz.

İçeriğimizi oluşturalım;

<a title="oztecnic Logo" href="#">oztecnic</a>

Şimdi <a> elementini CSS ile şekillendirelim.

a {
	background:url(oztecnic.jpg) no-repeat;
	display:block;
	text-indent:-9999px;
	height:58px;
	width:274px;
}

a:hover {
	background:url(oztecnichover.jpg) no-repeat;
}

Örneğin çalışan halini buradan görebilirsiniz. Dikkat ederseniz fare ile linkin üzerine geldiğinizde gösterilecek imaj, sayfa ilk yüklenirken çağrılmadığı için :hover durumunda, ufak bir yükleme zamanı kesilmesi oluyor. Bu durum sadece imaj bilgisayarımıza ilk defa indirilirken gerçekleşiyor. Ufak bir problem gibi görünse de, bu durum hoş görünmüyor.

Arka Plan Pozisyonlama ile Rollover Image

İlk teknikteki sorunu ortadan kaldırmak için, bu iki imajı birleştirerek, tarayıcı sayfayı ilk yüklediğinde her iki duruma ait imajların, tek bir imaj olarak yüklenmesini sağlamış olacağız. Bunu yapabilmek için öncelikle, iki durum için ayrı olan imajları, tek bir imaj haline getirmemiz gerekiyor.

Şimdi de CSS kodumuzu yazalım;

a {
	background:url(oztecnicset.jpg) no-repeat;
	display:block;
	text-indent:-9999px;
	height:58px;
	width:274px;
}

a:hover {
	background-position:left -58px;
}

Kod üzerinde de gördüğünüz gibi, burada arka plan imajını değiştirmek yerine, negatif pozisyonlama yaparak, :hover durumu için imajın ilk durumda görünmeyen kısmını yukarı taşımış olduk. Böylece ilk teknikteki sorunumuzu da gidermiş olduk. Sonucu buradan görebilirsiniz.

Bu tekniğin detaylı uygulanmış halini, şuradaki yazıdan okuyabilirsiniz.

Hemen Paylaş!

Fırından yeni çıkmış yazılardan haberdar olmak için RSS yayınıma abone olabilir ya da beni Twitter'dan takip edebilirsiniz.

Yorumla Bakalım

Yorumlara Git

Daha Fazlasını Oku!

Makale Detayı

Bu Makale için toplam 10 adet yorum bulunmaktadır...

Bu Makale 18 Nisan, 2009 ve saat 14:59 itibariyle CSS kategorisi altına kaydedilmiştir. Bu makale ile ilgili yorumları RSS 2.0 beslemesinden takip edebilirsiniz.. Bu makale için yorum yapabilir, veya kendi web sitenize trackback sağlayabilirsiniz...