さまざまな画面サイズで画像内のマウスクリックの位置を検出する - Jquery/JavaScript

Question

私は、 "container"という最初のdivを持っています。これは、Oklahomaマップのheight:100% width:100%画像です。アイデアは、ユーザーがマップの特定のセクション（この例ではパンハンドル）をクリックすると、divはパンハンドルイメージであるdivに切り替わります。クリックするとマウスのピクセル位置を知ることで、ユーザーがクリックする場所を決めます。

問題は、サイズの画面が異なるとピクセル値が異なることです。以下は自分のサイズのウィンドウで動作するコードですが、実際のプログラムのコードを実行するとウィンドウが小さくなり、ifステートメント内に記述されている領域はパンハンドルの周りにはありません。

$(document).ready(function() 
{ 
    $("#container").click(function(e) 
    { 
     var x = event.pageX; 
     var y = event.pageY; 

     if(x >= 45 && x <= 550 && y >= 245 && y <= 330) 
     { 
      //alert('You clicked the panhandle!'); 
      $("#region1").toggle(); 
      $("#container").toggle(); 
     } 
}); 
}); 

私はifステートメント内の状況を処理する方法を変更する必要があると思っています。どのようにこれにアプローチしますか？

Answer 1

すべての値を比較する前に、すべての値をスケーリングする必要があります。あなたの正規の幅でxを掛け、実際の幅で割り、yとheightで同じようにします。

Answer 2

あなたは明確なピクセル値を仮定して、あなたのサイトには、デバイスやブラウザのさまざまな動作することを期待してはいけません - 特にあなたがズームの合併症を持っているのiPadやAndroidタブレットのようなものとDPIの設定などの

あなたの位置/サイズ指定には常に幅と高さの％を使用することをお勧めします。たとえば、パンハンドルは（0.23,0.76）に、サイズ（0.12,0.08）などに配置することができます。

ブラウザでは、ボックスの寸法を取得し、これらの値を掛けて実際のピクセル値を取得します。