[ HTML ] 이미지 특정 범위에 클릭영역 지정하기 / img map

1. img 태그 속성으로 usemap을 지정(id와 유사)
   usemap='#*'
2. 이미지 위치 상관없이 map태그를 기술. map태그 속 name 속성에 맵을 지정할 이미지의 usemap을 '#'없이 기입.
3. map태그(와 마감태그) 사이에 area태그 기술. 필수속성으로 shape='도형이름:rect/circle/poly/default',
   coords='위치좌표값'

• shape속성값 : default는 전체, poly는 다각형
• coords를 지정할 때 :
  사각형(rect) - 상좌 꼭짓점의 x좌표, y좌표, 하우 꼭짓점의 x좌표, y좌표
  원(circle) - 차례로 x좌표, 4좌표, 반지름(길이)
  다각형(poly) - 꼭짓점들의 x좌표, y좌표 나열

 

 

활용 <area태그>

• href 속성 - 클릭시 링크 이동
• onClick 속성 -  JS등의 동작수행 

 

 

 

예시

---

workplace.jpg

 

 

다각형으로 삼각형 영역 만들기

<area shape="poly" coords="100, 50, 50, 100, 150, 100" alt="Cup of coffee" href="coffee.htm">​

범위

 

 

 

 

사각형, 원 영역 만들기

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>​

 

범위

 

이미지의 클릭 위치에 따라 다른 링크를 걸 수 있다.

 

 

이미지 출처 https://www.w3schools.com/