‘CSS SPRITE’ Tekniği ile Sayfada Resim Kullanmak
Sizin için araştırdım ve yazdım. Bence çok mantıklı ve seo açsından önemli.
Toplam Resim Sayısı…Web Sitelerimizde bulunan resim sayları arttıkça, sitenin toplam boyutu da artmakta ve sitedeki sorgulama sayısı da artarak, sitenin hızını da doğrudan etkilemektedir. Seo açısından zararlıdır. Sitelerde kullanılan resim sayısı azaltılmalı ve kullanılması gereken resimlerin boyutları küçültülmelidir. Resim sayısını ve dolayısıyla sorgulama sayısını azaltmanın en iyi yolu, resimlerde css sprite tekniğini kullanmaktır.
“HTML KODLARI”
[cc lang=”php”]
[/cc]
“CSS KODLARI”
[cc lang=”css”]
body {
}
ul, li {
list-style-type: none;
margin: 0;
padding: 0;
}
#menu {
background: url(“sprite.png”) repeat scroll 0 0 transparent;
height: 45px;
overflow: hidden;
width: 570px;
}
#menu li {
float: left;
}
#menu li a {
display: block;
height: 45px;
text-indent: -9999px;
}
#menu li a:hover {
background: url(“sprite.png”) repeat scroll 0 0 transparent;
}
#menu li.b1 a {
width: 112px;
}
#menu li.b2 a {
width: 116px;
}
#menu li.b3 a {
width: 146px;
}
#menu li.b4 a {
width: 88px;
}
#menu li.b5 a {
width: 108px;
}
#menu li.b1 a:hover {
background-position: 0 -45px;
}
#menu li.b2 a:hover {
background-position: -112px -45px;
}
#menu li.b3 a:hover {
background-position: -228px -45px;
}
#menu li.b4 a:hover {
background-position: -374px -45px;
}
#menu li.b5 a:hover {
background-position: -462px -45px;
}
[/cc]
Bu çalışmayı İndirebilirsinz…
(Tüm Sorularınızı Yorum Olarak Bırakın. En Geç 24 saat içinde cevap gelecektir…)
——————————-