개발's egg
이미지 어딘가를 클릭하면 이벤트가 실행되는 이미지맵 with React
현z
2023. 3. 3. 17:45
1. https://www.npmjs.com/package/image-map
image-map
Response, dynamic image maps. Latest version: 2.0.1, last published: 3 years ago. Start using image-map in your project by running `npm i image-map`. There is 1 other project in the npm registry using image-map.
www.npmjs.com
image-map 설치
npm install image-map
useEffect(() => {
ImageMapEs('img[useMap]');
}, []);이미지맵을 깨워주고
Free Online Image Map Generator
Easy free online html image map generator. Select an image, click to create your areas and generate html your output!
www.image-map.net
여기서 이미지맵 코드를 만들면
아래와 같은 코드를 뱉어줌. 적당히 이벤트 줘서 쓰면 된다.
<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>