다양한 화면 크기에서 이미지 내의 마우스 클릭 위치 감지 - Jquery/JavaScript

Question

"컨테이너"라고하는 초기 div가 있습니다. 이는 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

당신은 명확한 픽셀 값을 가정하고 사이트 장치 및 다양한 브라우저에서 작동 기 대해서는 안 - 당신이 등 확대의 합병증 및 dpi로 설정이 경우 특히 아이 패드 나 안드로이드 태블릿 같은 것들에

내 권장 사항은 항상 너비/높이의 %를 위치/크기 지정에 사용하는 것입니다. 예를 들어 팬 핸들의 크기는 (0.23,0.76)이고 크기는 (0.12,0.08)입니다.

모든 브라우저에서 상자 크기를 가져 와서이 % 값을 곱하여 실제 픽셀 값을 얻습니다.