[HTML] <img> usemap Attribute

▶ 개요

아래와 같은 경우 img tag의 usemap 속성을 이용하면 된다.

1) 하나 이미지에서 영역 따라서 각기 다른 link를 설정하고 싶은 경우

2) 이미지 내 일정 영역에 대해서만 link를 설정하고 싶은 경우

▶ 예시

영역모양은 3가지 형태(사각형, 원, 다각형)이다.

영역범위는 왼쪽 상단이 기준좌표(0,0)이며, weight가 X축, height가 Y축이다.

<img src="image.jpg" alt="이미지" usemap="#img_map"/>

<map name="img_map">

<area shape="rect" coords="X1,Y1,X2,Y2" href="./goDownLoad.do" alt="다운받기">

<area shape="circle" coords="X,Y,RADIUS" href="./goDownLoad.do" alt="다운받기">

<area shape="poly" coords="X1,Y1,X2,Y2, ... ,Xn,Yn" href="./goDownLoad.do" alt="다운받기">

</map>

* 위 예시 그림처럼 사각형으로 범위를 지정하고 싶을 경우

1) shape="rect" 으로 지정

2) 시작범위(왼쪽 위) ~ 종료범위(오른쪽 아래) 의 좌표값으로 지정

3) href 속성 처리

▶ 참조

https://www.w3schools.com/tags/att_img_usemap.asp

http://tonks.tistory.com/39