画像重ね合わせ、背景を打つことなくアイコンをクリック

Question

私はHTMLでCSS、JavaScriptを使用しています。 私の画像は私のapp/assets/imagesフォルダに保存されています。 私のオーディオ（onClickイベントリスナー用）は私のpublic/audiosフォルダに保存されています。

私はお互いを重ね合わせてレイヤーを探していますので、個々の画像をそれぞれ別のJavaScript onClickイベントリスナーに設定することはできますが、これらの画像は目に見えない背景でレンダリングされていますか？それは上に重ねられた画像をクリックするのを妨げている。

スタンドアロンのアイコン（gif）には背景がありません。参照のための背景のないアイコンの サンプリング：http://findicons.com/search/gif

が画像に見えない背景があることを強調するために、

the bottom icon, this is the icon highlighted, clicking in the background of the icon (it's highlighted) also initiates the JavaScript onClick event listener

私はレールが私のページ上の画像をレンダリングするためにコマンドを使用します。テキストと混乱の量を少なくするためのdiv

#id3 { 
    position:absolute; 
} 

をターゲット

<div id="id3"> 
    <%= image_tag "gif_file.png" %> 
</div> 

私のCSS、私は互いの上に重ねるのアイコンを示してコードを残しています。

私の.jsの目に見えないバックグラウンドを押すことなく

var soundright = '<audio autoplay="autoplay" src="/audios/hello.wav"></audio>' 
var sound = document.getElementById('sound'); 

var icon = document.getElementById('id3'); 

$(icon).click(function(){ 
    $(sound).html(soundright); 
}); 

は、私は目に見えて（個々の画像に付加JavaScriptのonClickイベントリスナー）互いの後ろに積層された各レンダリング画像をクリックすることができますか教えてくださいファイルその上に重ねられた画像。

不可視の背景を削除することは、私が見つけることができなかった解決策です。

私はお互いを重ね合わせてダーツボードを作り、ダーツボードの各部分をクリックできるようにしようとしています（onClickイベントリスナー）。

編集：だけではなく、背景を排除し、JSを使用することが容易

Answer 1

を理解するために作るために私の最後の3つの段落をeditted、HTMLソリューションがあります。

イメージを1つのイメージに結合し、次に<map>を使用して、イメージマップを作成します。これは、クリック可能な領域を定義するために<area>のタグを作成することを意味し、各領域（各画像）は異なるJSイベントリスナを設定できます。それを使用する方法の良いアイデアのために

、W3Schoolsのが提供するexampleを参照してください（これは非常に簡単です、あなたは他のツールとはるかに複雑なものを作成することができます）：

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

<map name="planetmap"> 
    <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> 
    <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> 
    <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> 
</map> 

は、多くのツールでもあります。 https://www.image-maps.com/のようなイメージマップを作成することができます（座標を見つけて手作業で書く必要はありません）。

イメージマップは、この特定の問題に対処するための本当にクールな解決策です。

Answer 2

これは<img>タグの動作です。彼らは常に長方形のヒットボックスを持っています。

あなたが探している挙動を提供する<map>タグがあります（設定の少し後）が、スタイルが古くなってから長いです。

HTML5の<canvas>または（shudder）Flashを使用してソリューションを再解析する必要があります。あなたは厄介得るようなものを感じた場合、：

ヘック、あなたもマウスがeventパラメータ（e.clientXとe.clientYヒント）から座標グラブ1つのonClickハンドラで一つの画像を使用することができます。 :)