이미지 입력에서 xy 좌표를 얻는 방법?

나는 입력 이미지의 유형을 설정했습니다 :이미지 입력에서 xy 좌표를 얻는 방법?

<form id="MapForm" action="#"> 
    <input type="image" src="usa.jpg" id="usa_map" alt="USA"/> 
</form>

나는 사람이 클릭 한 X XZx20 Y 좌표를 얻을 수 있도록 함수를 첨부하려면 :

$('#MapForm').submit(ClickOnMap); 
function ClickOnMap(data) 
{ 
    return false; 
}

찾을 수 없습니다 '데이터'안에있는 X & Y 좌표. 내가 뭘 잘못하고 있죠?

출처

2010-02-13 Robert

좋은 튜토리얼 in the jQuery docs, 여기에 있습니다 :

$('#usa_map').click(function(e){ 

    //Grab click position, mis the offset of the image to get the position inside 
    var x = e.pageX - this.offsetLeft; 
    var y = e.pageY - this.offsetTop; 
    alert('X: ' + x + ', Y: ' + y); 

    //set 2 form field inputs if you want to store/post these values 
    //e.g. $("#usa_map_x").val(x); $("#usa_map_y").val(y); 

    //Submit the form 
    $('#MapForm').submit(); 
});

출처

2010-02-13 22:47:14

링크가 오래되었습니다. 이사 왔어? – 4castle

처리기 함수 ("Event"개체)의 매개 변수에는 "pageX"및 "pageY"값이 있습니다. 당신의 img 요소에 대해 그것들과 "위치()"또는 "오프셋()"으로 수학하십시오 (어느 것이 더 좋든간에, 어느 상황에서 어느 것이 작동하는지 예측하기가 정말 혼란 스럽습니다).

즉, img 요소의 "position()"은 "위쪽"및 "왼쪽"값을 제공합니다. "pageY"와 "pageX"에서 그것들을 뺀다면, 당신은 이미지 내부의 좌상 구석에 상대적인 위치를가집니다.

"제출"이벤트에 바인딩하는 이유를 잘 모르겠다 - "제출"버튼 또는 그 안에있는 이미지입니까?

출처

2010-02-13 22:02:33 Pointy

내가 이해하는 방식으로 이미지 입력이 제출 입력 대신 사용됩니다. 따라서 이미지를 클릭하는 것은 제출 버튼을 클릭하는 것과 동일한 동작을합니다. – Robert

어 ... HTML을 게시 할 수 있습니까? 그것은 나에게 꽤 물고기 같아 보인다. 그 제안을 어디서 보았습니까? – Pointy

Oh duhhhh - HTML 게시 :-) 죄송합니다. 어쨌든, 설정된 방식으로 양식 제출이 이루어지지 않습니다. 그러나 이미지에 "클릭"처리기를 첨부하고이를 사용하여 양식에서 "제출"을 호출 할 수 있습니다. – Pointy

submit의 형식은 submition 전에 실행하기 때문에 당신의 x 및 y 값을 얻을 수 없습니다. jQuery API에서

... 밋 이벤트는 사용자가 양식을 제출하려고 요소로 전송됩니다 ...

...이 전에 실제 어떻게됩니까 제출 ...

출처

2010-02-13 23:09:32 jerone

이미지 입력에서 xy 좌표를 얻는 방법?

답변

관련 문제