div/imageの特定の領域をクリックして別のJavascript関数を実行する方法

Question

div/imageの異なる領域をクリックして別のJavascript関数を実行できるかどうかは疑問です。

たとえば、サイズが100ピクセル×100ピクセルの画像があり、ユーザーが画像の左上20％をクリックするたびに警告を表示する場合（つまり、ユーザーが画像の左上の0％画像の上から20％、画像の左から0％から20％）は可能ですか？

もしそうなら、私はまた、（別の警告メッセージ付き）異なるJavascriptの警告機能を実行させる可能性がダウンの上から30％-40％の間だ領域内のユーザーのクリックした場合画像、画像の左側から50-60％の画像がありますか？

明示的にピクセル数を定義するのではなく、高さと幅のパーセンテージを使用して領域を定義する必要があります。

このようなことは可能ですか？もしそうなら、ライブラリ/カーソルの位置を検出するライブラリが必要ですか？

Answer 1

clickイベントでposition（）関数を使用できます。あなたのイメージにid =「MYIMAGE」を持っている場合 あなたはこのような何かを行うことができます。

$("#myImage").click(function(e) { 
    var horizpercent = 20; 
    var vertpercent = 20; 
    var posX = e.pageX - $(this).position().left; 
    var posY = e.pageY - $(this).position().top; 
    var width = $(this).width(); 
    var height = $(this).height(); 
    if (posX < width * horizpercent/100 && posY < height * vertpercent/100) { 
     alert('ye') 
    } 
}); 

Answer 2

ソリューションは、画像要素を介して複数のオーバーレイを作成することです。

<div class="ovrl-container"> 
    <img src="..." alt="..."> 
    <div class="ovrl ovrl1"></div> 
    <div class="ovrl ovrl2"></div> 
    <div class="ovrl ovrl3"></div> 
</div> 

.ovrl-containerposition:relative、すべての子供position:absoluteなければなりません。 .ovrlは、画像自体の代わりにクリックをキャプチャするために、画像よりも大きいz-indexを持つ必要があります。 .ovrl1、.ovrl2、.ovrl3は、必要に応じてサイズと位置を調整する必要があります。

JSの部分では、.ovrl1、.ovrl2、.ovrl3、jQueryの例をクリックして聞いている：

$('.ovrl').click(function(){ 
if($(this).hasClass('ovrl2')){ 
// action only for ovrl2... 
} 
}) 

Answer 3

私は最高のaproachがメインのdiv /コンテナの背景として画像を設定することだと思い、 "display：flex"プロパティを使用して、必要なパーセンテージで幅と高さを設定してdivsをコンテナ内に配置します。そして、あなたはそれぞれのdiv要素にイベントリスナーを追加することができます。

<div class="container" style="display: flex"> 
<div id="left-ear" style="height: 20%; width: 30%" onClick="event"></div> 
<div id="space-inbetween-ears" [same height and width= 100 - (leftearWitdh 
x2)></div> 
<div id="right-ear..." [same as leftEar] onClick="event"></div> 
</div> 

このような何かを...

Answer 4

jQueryのフリーな実装は次のようになります。

var click = document.getElementById("click"); 
 
click.onclick = function (evt) { 
 
    var xOff = click.offsetLeft; 
 
    var yOff = click.offsetTop; 
 
    var clickedX = evt.pageX - xOff; 
 
    var clickedY = evt.pageY - yOff; 
 
    click.innerHTML = `Clicked on relative pos: ${clickedX}, ${clickedY}`; 
 
};

<div style="height: 200px;">Some random height</div> 
 
<div style="height: 50px; background-color: #fdd;" id="click"></div>