[html5]#이미지맵 만들기(usemap)

<img> 태그의 usemap 속성은 클라이언트 사이드 이미지 맵(client-side image-map)으로 이미지를 명시한다. usemap 속성은 <map> 요소의 name 속성과 결합하여, <img> 요소와 <map> 요소 사이의 관계를 생성한다.
만약 해당 <img> 요소가 <a>요소나 <button> 요소의 자손 요소(descendant element)이면 usemap 속성은 사용할 수 없다.

설명출처 - https://www.tcpschool.com/

👦 복권이벤트페이지 작업 중에 디자이너가 클릭(터치)되어야 하는 부분까지 합쳐서 이미지를 통째로 넘겨주었다. 클릭(터치)되어야 하는 부분만 따로 이미지를 넘겨주면 안되냐고 요구했는데, 흐지부지 통째 이미지로 작업하게 되었다.
그렇게 구글링을 시작, usemap을 발견하게 되었고, 다행히 좌표까지 계산해주는 사이트도 찾게 되어 원하는 부분만 클릭(터치)할 수 있게끔 작업하였다.
요즘은 웬만한 코딩 관련된 부분은 구글링 통해서 찾을 수 있는 아주 좋은(?)세상이다.
usemap의 마크업은 아래와 같다.

<img src="이미지주소" alt="대체텍스트" usemap="#image-map"/>
<map name="image-map">
   <area shape="rect" coords="1098,854,63,1574" alt="대체텍스트" 
        href="http://www.abcd.co.kr">
</map>

위 마크업을 설명하자면, <img>태그에 usemap="" 이 부분에 원하는 이름을 지어준다.
그리고 <map name=""> 이 부분에 usemap="" 에서 적어줬던 이름(?)을 여기 동일하게 적는다. 그리고 shape="" 에는 원하는 모형 circle, rect, poly 중 선택하여 적고, coords ="" 여기에는 클릭(터치)될 영역의 좌표를 적는다.

[rect 기준 좌표값]
좌측상단 꼭지점 x,y 좌표값 / 우측하단 꼭지점 x,y 좌표값

[circle 기준 좌표값]

원 중심점 x,y 좌표값 / 원의 반지름

[poly 기준 좌표값]
각 꼭지점의 x,y좌표값


좌표값 구하기가 어렵다면, 쉽게 계산해주는 사이트다. 내가 작업해야 할 이미지를 올린 후 작업할 수 있기 때문에 정말 편리하다.
https://www.image-map.net/ 여기서 작업하면 usemap은 사실 끝!