이미지 맵(map) 요소

<map>

• 이미지 맵(클릭 가능한 링크 영역)을 정의하기 위해 <area> 요소와 함께 사용됨.

• 이미지 맵 좌표 생성 도구: https://www.image-map.net/

  • 예를 들어 아래의 "길거리 음식 도감"과 같은 이미지에서 각 음식 사진들의 위치를 개발자가 좌표로 설정하는 것은 힘들기 때문에 자동으로 좌표를 설정해주는 도구를 사용하면 간편하다.

<area>

• 이미지의 핫스팟 지역 정의, 하이퍼링크 설정. <map> 내부에서만 사용 가능.

• 여러개 사용 가능 (원, 사각형, 다각형)

• alt속성 (필수), <title> 속성을 사용해 주기

속성

• shape - 핫스팟 모양 설정

• coords - 좌표 값 설정

• href - 하이퍼링크 주소 설정

• target - 새 창(탭) 열림 설정

• alt - 대체 텍스트 설정

• hreflang - 연결된 페이지의 언어 속성 설정

• download - canvas 데이터 다운로드 설정

예제

<img src="products-map.jpg" alt="제품 모음" usemap="#products-map" />
<map name="products-map">
  <area
    shape="circle"
    coords="200,250,25"
    hreflang="en-GB"
    href="another.html"
    alt="Another Page"
    target="_blank"
  />
</map>

<!-- map + area -->
<img
  usemap="#foods-in-kr"
  src="media/image/food-in-korea-of-republic.jpg"
  alt="우리나라 길거리 음식도감"
/>

<map name="foods-in-kr">
  <area
    shape="rect"    
    coords="0, 0, 100, 100" 
    href="http://www.typographyseoul.com/news/detail/404"
  />
</map>