0
Kayıt Ol

Resimlere sprite yapma

6

●

575

  • 02-05-2015, 12:11:10
    #1
    bitGAMER
    bitGAMER
    Anasayfamda resimler olduğu için sitem yavaş açılmakta buda sitenin pagespeed değerlerini düşürmekte. Resimleri sprite yaparak bunu düzeletebileceğimi biliyorum. Fakat çok uğraşmama ragmen durumu çözemedim.


    Resimleri Bu şekilde Bir araya getirdim.




    Kodlarda Bunlar:

    /* Generated by http://css.spritegen.com CSS Sprite Generator */
 
.arama-ust-yeni, .link, .sepet-ust, .addtocart, .view, 
.small, .small-bg, .home-icon, .home-iconh
{ display: inline-block; background: url('png.png') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left; }
 
.arama-ust-yeni { background-position: -1px -0px; width: 800px; height: 58px; }
.link { background-position: -1px -59px; width: 636px; height: 35px; }
.sepet-ust { background-position: -1px -95px; width: 263px; height: 71px; }
.addtocart { background-position: -638px -59px; width: 86px; height: 22px; }
.view { background-position: -725px -59px; width: 66px; height: 22px; }
.small { background-position: -638px -82px; width: 50px; height: 60px; }
.small-bg { background-position: -689px -82px; width: 50px; height: 60px; }
.home-icon { background-position: -740px -82px; width: 23px; height: 25px; }
.home-iconh { background-position: -764px -82px; width: 23px; height: 25px; }
    Html Kodları:

    <div class="arama-ust-yeni"></div>
<div class="link"></div>
<div class="sepet-ust"></div>
<div class="addtocart"></div>
<div class="view"></div>
<div class="small"></div>
<div class="small-bg"></div>
<div class="home-icon"></div>
<div class="home-iconh"></div>


    Websitesi: Opencart kullanılan php site. Pm ile adresi yollayabilirim.

    Bunları Tam olarak nereye ekleyeceğim.
  • 02-05-2015, 12:16:03
    #2
    YasinGNC
    YasinGNC
    Generator sitelerinden aldığınız kodları direk kullanamazsınız. Sitenizdeki classlara aktarmalısınız.

    CSS satırlarını ilgili .css dosyasına atıp değiştirin. Yedek almanız yararınıza olacaktır. "background: url('png.png')" url yolunun düzgün olduğundan emin olun.
  • 02-05-2015, 12:18:17
    #3
    bitGAMER
    bitGAMER
    YasinGNC adlı üyeden alıntı: mesajı görüntüle
    Generator sitelerinden aldığınız kodları direk kullanamazsınız. Sitenizdeki classlara aktarmalısınız.

    CSS satırlarını ilgili .css dosyasına atıp değiştirin. Yedek almanız yararınıza olacaktır. "background: url('png.png')" url yolunun düzgün olduğundan emin olun.
    Onlari attim. Resim adresinide düzelttim. Divleri nereye ekleyeceğim onu çözemedim sistem php.
  • 02-05-2015, 12:26:55
    #4
    YasinGNC
    YasinGNC
    İlgili div ve classlar sitenizde var mı? Site adresinizi gönderirseniz kontrol edebilirim. Muhtemelen head.php, header.php, top.php gibi bir isimdeki dosyada yer alırlar.
  • 02-05-2015, 13:30:15
    #5
    bitGAMER
    bitGAMER
    YasinGNC adlı üyeden alıntı: mesajı görüntüle
    İlgili div ve classlar sitenizde var mı? Site adresinizi gönderirseniz kontrol edebilirim. Muhtemelen head.php, header.php, top.php gibi bir isimdeki dosyada yer alırlar.
    home.tpl
    header.tpl

    dosyaları var

    Peki hocam bunları yaptıktan sonra. Spriteları kullanmak için url kısmına ne yazacağım resimlerin ?
  • 02-05-2015, 13:42:37
    #6
    YasinGNC
    YasinGNC
    background: url("/resimyolu/resim.png"); ile sprite dosyasını çekebilirsiniz. Resim sunucuda neredeyse oradan çektireceksiniz.

    background-position: -0px 0px; width: 100px; height: 100px; }
    Birinci -0px yatay (horizantal) değerdir. Sprite dosyasında X konumunu belirtir.
    İkinci -0px dikey (vertical) değerdir. Sprite dosyasında Y konumunu belirtir.
    width ve height değerlerini yazarsın ki fazla kısımlar gözükmesin.



    Ben buradan bu şekilde ne kadar anlatsam zor olur. Hoş anlatmasını da pek beceremiyorum. Site adresini ver. Tarayıcı üzerinden göstermeye çalışırım
  • 02-05-2015, 15:23:38
    #7
    bitGAMER
    bitGAMER
    YasinGNC adlı üyeden alıntı: mesajı görüntüle
    background: url("/resimyolu/resim.png"); ile sprite dosyasını çekebilirsiniz. Resim sunucuda neredeyse oradan çektireceksiniz.

    background-position: -0px 0px; width: 100px; height: 100px; }
    Birinci -0px yatay (horizantal) değerdir. Sprite dosyasında X konumunu belirtir.
    İkinci -0px dikey (vertical) değerdir. Sprite dosyasında Y konumunu belirtir.
    width ve height değerlerini yazarsın ki fazla kısımlar gözükmesin.



    Ben buradan bu şekilde ne kadar anlatsam zor olur. Hoş anlatmasını da pek beceremiyorum. Site adresini ver. Tarayıcı üzerinden göstermeye çalışırım
    Solasın Pm yolladım