HTML - 이미지 맵 요소

이미지 요소는 HTML의 이미지 안에서 특정 영역을 클릭했을 때 다른 링크로 연결되도록 하는 기능을 제공한다.

 

실제 웹사이트 하단에 보면 SNS로 이동하는 링크나 프로모션 상품 링크로 이동하는 경우 이미지맵을 사용하는 것을 종종 볼 수 있다.

<img
      src="/src/assets/sprite/sns.png"
      usemap="#image-map"
      alt="SNS 서비스"
    />

    <map id="image-map">
      <area
        target="_blank"
        alt="페이스북"
        title="페이스북"
        href="https://www.facebook.com"
        coords="15,16,16"
        shape="circle"
      />
      <area
        target="_blank"
        alt="인스타그램"
        title="인스타그램"
        href="https://www.instagram.com"
        coords="64,16,14"
        shape="circle"
      />
      <area
        target="_blank"
        alt="유투브"
        title="유투브"
        href="https://www.youtube.com"
        coords="115,15,13"
        shape="circle"
      />
    </map>

 

<map> 요소는 이미지 맵의 컨테이너 역할을 하며 name이나 id 속성으로 이미지 맵의 이름을 정의한다. 이때 사용된 속성값은 <img>의 usemap 속성값과 연결된다. 그다음 <map> 태그 안에 <area> 태그로 이미지의 클릭 가능 영역을 정의하면 된다. 
<area> 태그의 주요 속성은 다음과 같다.

 

속성	값	설명
shape	rect (사각형) circle (원형) poly (다각형) default (이미지 전체)	클릭 가능한 모양을 정의
coords	rect (x1, y1, x2, y2) circle (x, y, z) poly (x1, y1, x2, y2....)	클릭 가능한 영역 좌표 정의
href	URL	클릭시 이동할 URL
alt	영역에 대한 대체 텍스트
target	_self, _blank, _parent, _top	링크를 열때 대상 창을 지정

 

 

실질적으로 이미지의 좌표값을 직접 구하는 것은 매우 번거롭고 작업이 오래 걸린다. 때문에 이미지맵 좌표값을 구해주는 사이트를 이용하면 쉽고 빠르게 이미지맵을 구현할 수 있다.

 

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