JS onclick issue css sprite görüntülerini çağırmak için

Question

Bir görüntüyü tıklattığınızda belirli bir eylem gerçekleştiren bir JS oluşturdum. ATM tüm resimler bu fonksiyonu ile ayrı ayrı yüklenir ve denir:

var array_colors = []; 
$('#input_59_20 > li.active').each(function(index){ 
    var img = $(this).find('img').attr('src'); 
    array_colors.push(img); 
});` 

şey olduğunu pek http isteklerini olduğu gibi sayfa yükleri nispeten yavaş. Bu yüzden, sayfayı 50 küçük resim dosyası yerine 1 css sprite üzerinde çağırmaya karar verdim, ancak hareketli grafik aracılığıyla yüklenen tek tek görüntüleri nasıl arayacağımı anlayamıyorum. css sprite öğelerinin görüntülerinden biri için örnek bir çağrı: <i class="sprite sprite-sb31-choco"></i>

Yardımın için teşekkürler. Saygılarımızla, Amir

Answer 1

Sorularınızı doğru anlıyorsam, yanlış bir şekilde yaklaşıyorsunuz gibi görünüyor. İhtiyacınız olan şey resim haritalamadır. Böylece, tüm görüntüyü tek seferde yükleyebilir ve resmin üzerine tıklanacak ve bir şeyler yapabilecek kısımlarını haritalayabilirsiniz.

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> 

<map name="planetmap"> 
    <area class="imgClick" shape="rect" coords="0,0,82,126" href="#" alt="Sun"> 
    <area class="imgClick" shape="circle" coords="90,58,3" href="#" alt="Mercury"> 
    <area class="imgClick" shape="circle" coords="124,58,8" href="#" alt="Venus"> 
</map> 

Ve href niteliği olarak aşağıdaki gibi bir şeye ihtiyacım alan etiketinde zorunludur yönlendirmeden başka bir şey yapmak için aşağıdaki:

Ben sprite beri düşünüyorum

<script> 
    $(".imgClick").on("click", function(e){ 
     e.preventDefault(); 
     /* 
      your code here 
     */ 
    }); 
</script>