CSS ile Rollover Image Mantığı

Tarih : 18 April, 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 13 adet yorum bulunmaktadır...

Bu Makale 18 April, 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...

CSS ile Rollover Image Mantığı için toplam 13 yorum var...

bitlimakina Diyorki:
18 April, 2009 ve saat 17:19:01'de gönderdi...

güzel yazı olmuş.tebrikler

1
Semih Diyorki:
19 April, 2009 ve saat 13:45:55'de gönderdi...

Gerçekten çok güzel bir yazı olmuş.

Yaptığım wordpress temalarında bu özelliği kullanmakiçin çok uraştım ancak olayı kavrayamadığım için olumlu sonuç alamamıştım..

Teşekkürler….

2
oztecnic Diyorki:
19 April, 2009 ve saat 19:41:11'de gönderdi...

@Semih faydalı olmasına sevindim, kolay gelsin…

3
Kadir GÜNAY Diyorki:
27 April, 2009 ve saat 16:03:20'de gönderdi...

Pozisyonlama olayı bence en iyisi. Menülerde çok işime yarıyor. Tek imaj üzerinden döndürüyorum her şeyi.

Teşekkürler Özgür bu güzel anlatım için.

4
oztecnic Diyorki:
27 April, 2009 ve saat 21:37:33'de gönderdi...

Kadir merhaba,

Dediğin gibi menulerde çok işe yarıyor, ben de pozisyonlama tekniğini kullanmaya gayret gösteriyorum…

5
Muratcan Diyorki:
30 April, 2009 ve saat 15:40:53'de gönderdi...

Teşekkürler

6
oztecnic Diyorki:
30 April, 2009 ve saat 22:33:41'de gönderdi...

@Muratcan, ben teşekkür ederim…

7
Web Öğrencisi Diyorki:
2 May, 2009 ve saat 11:32:46'de gönderdi...

Lazım olunca böyle yapıyorum fakat etiketinin içine yazı yazma ve css bölümüne text-indent kodunu kullanma gereği duymuyorum. Yanlış hatırlamıyorsam gayet güzel çalışıyor. (:

8
oztecnic Diyorki:
2 May, 2009 ve saat 13:13:36'de gönderdi...

@Web Öğrencisi içeriğe, yani linkin içine XHTML Text olarak o linkin ne olduğunun ifade ederek, uygulamayı daha erişilebilir kılıyoruz.

Çünkü içerik, yani yalın XHTML, her platformdan sorunsuzca ulaşılabilir bir katman. sadece XHTML çalıştıran bir platformdan bakan birinin, rollover-image linklerimizi görememesini istemeyiz değil mi

Kolay Gelsin…

9
COLOR Diyorki:
21 December, 2009 ve saat 23:03:04'de gönderdi...

.hover
.active
.selected

arayüz konusunda çok titizim bunların hepsi olması lazım bilgi için saol.

10
Cem Demir Diyorki:
12 July, 2010 ve saat 14:04:54'de gönderdi...

Güzel anlatım olmuş elinize sağlık. Fakat resim bir link olmaktan çıkınca CSS bu işi yapmak için yetmiyor sanırım. Javascript bilmek gerekecek.

11
combed Diyorki:
28 October, 2010 ve saat 02:22:37'de gönderdi...

güzel yazı olmuş. Emeğine sağlık.

12
Hep Tasarım Diyorki:
12 August, 2011 ve saat 14:54:54'de gönderdi...

Teşekkürler, harika bir örnek
CSS Sprite’ın en yalın hali

13