이미지 어딘가를 클릭하면 이벤트가 실행되는 이미지맵 with React

1. https://www.npmjs.com/package/image-map

image-map

image-map 설치

npm install image-map

 

 

 

useEffect(() => {
  ImageMapEs('img[useMap]');
}, []);

이미지맵을 깨워주고

 

 

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

Free Online Image Map Generator

여기서 이미지맵 코드를 만들면

아래와 같은 코드를 뱉어줌. 적당히 이벤트 줘서 쓰면 된다.

<img src={mapImage} style={{ width: 'auto', height:'100%', objectFit:'contain'}} useMap="#image-map" alt="테스트베드 현장도" />
<map name="image-map">
  <area className="clickable" onClick={() => {showDetail(1)}} alt="zone_1" title="zone_1" coords="97,270,43" shape="circle"/>
  <area className="clickable" onClick={() => {showDetail(2)}} alt="zone_2" title="zone_2" coords="125,91,44" shape="circle"/>
  <area className="clickable" onClick={() => {showDetail(3)}} alt="zone_3" title="zone_3" coords="454,70,41" shape="circle"/>
  <area className="clickable" onClick={() => {showDetail(4)}} alt="zone_4" title="zone_4" coords="511,145,35" shape="circle"/>
  <area className="clickable" onClick={() => {showDetail(5)}} alt="zone_5" title="zone_5" coords="540,259,45" shape="circle"/>
</map>