[js] 이미지 특정 위치 클릭시 이벤트 처리 (ft. 특정 좌표 area, map)

[js] 이미지 특정 위치 클릭시 이벤트 처리 (ft. 특정 좌표 area, map)

 

이미지에서 특정 좌표 클릭시

이벤트 구현입니다. 

 

<map> 태그는 이미지맵을 만드는 태그입니다.
jpg, png, svg 와 같은 이미지에 링크를 걸어주어 화면 이동을 가능하게 합니다. 
많이 사용할 일은 없지만 복잡한 지도같은 이미지에 주요 사용됩니다. 

<map> 과 <area> 태그를 이용하여 특정 좌표에 영역을 지정하고 클릭 이벤트를 걸 수 있습니다. 

 

image map 태그 예제

• image 태그의 usemap 의 이름과 map 태그의 name을 동일
• map은 area 요소를 포함
• area에서 shape(영역 모양)을 정의(rect(사각형), circle(원형), poly(다각형), default(기본값으로 전체 영역)의 속성 값)
• coords 좌표 위치 지정(x1, y1, x2, y 2가 속성 값으로 사각형의 왼쪽 위 모서리와 오른쪽 아래 모서리의 좌표를 명시)
• map에서 name과 id를 중복 사용한 이유는 name 속성이 xhtml에서는 퇴화 속성이기 때문
• 좌표에서 왼쪽 위 모서리의 좌표는 언제나 (0,0)이 됨
• 링크가 없을땐 nohref 로 정의
• href 속성이 꼭 있어야 함

 <img src='/images/roadmap.svg' usemap='#roadmap' />
 <map name="roadmap" id="roadmap">
   <area shape="rect" coords="84,20,145,73" href='#section1' onClick={()=> console.log('1')}/>
   <area shape="rect" coords="187,63,250,116" href='#section2' onClick={()=> console.log('2')}/>
   <area shape="rect" coords="44,124,107,182" href='#section3' onClick={()=> console.log('3')}/>
 </map>

 

유용한 좌표 구하기 툴 1

그림판 또는 포토샵을 이용하거나 아래의 사이트에서 쉽게 좌표를 구할 수 있습니다. 

http://maschek.hu/imagemap/imgmap/

maschek.hu - Online Image Map Editor

 

이미지 선택 후 업로드 후  accept 버튼을 누른 후 작업합니다. 

 

유용한 좌표 구하기 툴 2

위의 사이트보다 훨씬 좌표를 조작하기 쉬운 사이트이고 사용법은 동일합니다.

 

https://www.image-map.net/

Free Online Image Map Generator

 

 

<map> <area> 태그를 이용한 팝업창 구현은 아래 링크로 이동해주세요.

https://goddino.tistory.com/34

[js] 홈페이지 배너 팝업창 띄우기, 창닫기