JS onclickの問題がCSSスプライトの画像を呼び出す

Question

イメージをクリックすると特定の操作を実行するJSが作成されました。 ATMすべてのイメージは個別にロードされ、次の関数で呼び出されます。

多くのHTTPリクエストがあるため、ページのロードが比較的遅いということがあります。 私は50の小さなイメージファイルの代わりに1 cssスプライトを呼び出すようにページを変更することにしましたが、スプライトを介して読み込まれた個々のイメージを呼び出す方法を理解できません。 cssスプライトの画像の1つの呼び出しの例は、<i class="sprite sprite-sb31-choco"></i>

ありがとうございます。 よろしくお願いいたします。 Amir

Answer 1

私はあなたの質問を正しく理解していれば間違った方法で接近しているようです。あなたが必要とするのはイメージマッピングです。そのため、一度に画像全体を読み込んで、クリックする画像の部分をマップして何かを行うことができます。

<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> 

そしてhref属性はリダイレクト以外の何かをするには、以下のような何か必要なエリアタグに必須であるよう：

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