좌표에 따라 이미지 위에 단추를 넣고이 단추를 클릭 할 때 jquery 함수를 실행하는 방법

Question

이미지를 png 형식으로 표시하는 부분보기가 있습니다. 이미지의 경우 좌표가 x1, y1 인 점 집합이 있습니다. 어떤 종류의 단추 (예 : 너비 = 18 및 높이 = 23)를 이미지 위에 놓고 좌표에 따라 위치를 지정해야합니다. 사용자가 버튼을 클릭하면 alert() 함수가 실행되기를 원합니다. 내가 어떻게 해? 사용자가 창 크기를 조정하면 이미지의 크기가 조정되므로 좌표가 다시 계산되어 올바른 위치에 나타나야합니다.

Answer 1

<map> 태그, 구체적으로는 이미지 맵이라고합니다.

예 :

<img src="https://ctd.ucsd.edu/wp-content/uploads/2012/11/ABCD_VotingCard.png" usemap="#map"/> 
    <map name="map"> 
    <area shape="rect" coords="8,8,132,100" title="A" onclick="alert('A')"> 
    <area shape="rect" coords="158,8,282,100" title="B" onclick="alert('B')"> 
    <area shape="rect" coords="8,124,132,216" title="C" onclick="alert('C')"> 
    <area shape="rect" coords="158,124,282,216" title="D" onclick="alert('D')"> 
    </map> 

는 여기 demonstration입니다.