1.이미지맵을 만들어보자 : <map>,<area> 태그를 이용해서 이미지영역에 링크를 적용해

<a> 태그를 사용하여 특정경로로 이동시켜주는 경우는 개발과정에서 흔한경우입니다.

보통 버튼이나 텍스트에 <a> 태그를 통해 링크를 걸어주지만 간혹 이미지의 특정 영역에 링크를 걸어야 경우가 있는데요.
이런경우 보통 <a>태그에 position:absolute 속성을 통해 위치를 고정시킨 후 사용하곤 했습니다.

하지만 이러한 방법보다 더 간편한 방법이 있습니다.
바로 <map>태그와 <area> 태그를 이용하여 이미지의 특정좌표에 링크를 연결할 수 있습니다.

 

<img src="imgurl" usemap="#main_map" alt=""> 
 <map name="main_map"> // map name 설정 필수
     <area shape="rect" coords="785,1261,1000,1321" href="" alt="" />
 </map>
 
 // usemap 에 map name을 연결, 연결할 때 # 붙여야함
 // shape은 rect, poly, circle 중 선택가능, coords 는 위치값
 // area 를 사용해서 원하는 갯수만큼 클릭영역을 잡을 수 있음

 

사용방법을 간단히 요약하면 아래와같습니다.

 

1. <img> 태그에 usemap 속성을 추가해준다.  ex. # + <map>태그의 name 속성으로 사용할 이름
2. <map> 태그를 생성하고 <img>태그의 usemap 속성값을 name 속성값으로 할당하여 <img>태그와 <map>태그를 연결해준다.
3. 연결이 완료되면 <map> 태그의 자식요소로 <area>태그를 생성해준다. <area>태그는 연결된 이미지의 영역을 특정해서 링크를 연결해주는 역할을 한다.
4. <area> 태그는 여러개 생성하여 이미지의 여러영역에 링크를 연결할 수 있다.
5. <area> 태그의 속성으로는 지정한 영역의 모양을 결정하는 "shape" , 지정할 영역의 좌표를 설정하는 "coords" , 클릭 시 이동 할 경로를 설정하는 "href" , 해당 링크가 어떤 경로로 이동되는지 알려주는 "alt" 속성이 있다.

shape 속성의 종류

속성	설명
ract	직사각형 영역을 정의
circle	원형 영역을 정의
poly	다각형 영역을 정의
default	전체영역을 정의