Css, Sprite tekniği ile değişen zemin resmi
2055 0

Sprite Yöntemi Nedir?

Fare olayına bağlı olarak çalışan zemin resmi değiştirme olayı sırasında gecikmeler olabiliyor. Tabi ki resim dosyaları ayrı ise, sprite tekniğinde resmin her hali tek bir dosyada tutulur ve resmin belli bir bölgesi gösterilir. Bu da resmin yüklenmesi sırasında gerçekleşen gecikme problemini ortadan kaldırır. Çünkü tüm görünümler başlangıçta yüklenmiş durumdadır.

Dikkat edilmesi gereken önemli noktalar şunlardır; öncelikle genişlik ve yüksekliği belirtilmiş olan, block düzeyi bir eleman olmalıdır. Neme lazım overflow özelliğini "hidden" yaparız ki eleman dışına taşan bir şey olursa gizlenir. Son olarak background-position özelliğini kullanarak, resmin hangi bölgesinin gösterileceğini belirtiriz. Negatif değerler vererek resmi yukarıya ve sola çekebilirsiniz.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
	<title></title>
	<style>
		a.sprite{
			display:block; 
			width:99px; 
			height:179px; 
			background:url(birlesik.gif) no-repeat 0px 0px; 
			overflow:hidden;}
		a.sprite:hover{
			background-position:-99px 0px;}
	</style>
</head>
<body>
	<a href="" class="sprite"></a>
</body>
</html>

 

Uygulamayı Görmek İçin Tıklayın

 

^
X