이미지에 링크 여러개 걸기 - <map>, <area> 태그, usemap 속성

이미지에 링크 여러개 걸기 - <map>, <area> 태그, usemap 속성 활용

 

 

보통은 <img> 태그를 <a> 태그로 둘러싸는 방법으로 이미지 하나에 링크 하나 설정한다. 이미지 하나 당 링크 하나가 되는 것이다. 커다란 이미지 내에 각 요소 별로 링크를 걸 수는 없을까? 있다. 가능하다. <map>, <area> 태그와 <img> 태그의 usemap 속성을 사용하면 된다. 마케팅용 이메일 작성 시 기다란 통으로된 이미지를 사용하곤 한다. 이때 유용하게 활용할 수 있다.

 

 

 

예를 들어, 위에 사진에서 붉은색 동그라미 영역을 클릭하면 광동 옥수수 수염차 설명페이지로 이동하고, 보라색 동그라미 영역을 클릭하면 스타벅스 홈페이지로 이동한다. (※ 위에 사진은 모바일에서 제대로 작동하지 않는다. 모바일에서도 <map> 태그를 사용하려면 자바스크립트로 보완해야 한다.)

 

 

이미지에 링크 여러개를 설정하는 방법

 

 

 

 

1. <img> 태그에 usemap이란 속성을 추가한다.

2. <map> 태그 안에 있는 name 속성값을 <img>태그의 usemap 속성값과 동일하게 작성한다. (위에 그림에서는 'wow'로 작성)

3. <map> 태그 안에 <area> 태그를 작성한다.

4. <area> 태그 안에 속성값을 작성한다.

 

- shape : 링크 영역의 형태를 의미한다. rect(사각형), circle(원) 등이 사용 가능하다.

- coords : 링크 영역의 좌표를 의미한다. shape가 rect인 경우 좌표값은 4개, shape가 circle인 경우 좌표값은 3개를 기입해야 한다. 아래 그림을 예로 들어 설명하면, 'rect'는 "100(x축 시작점), 100(y축 시작점), 200(x축 끝점), 200(y축 끝점)"으로 작성해야 한다. 'circle'은 "300(원의 중심 x축), 300(원의 중심 y축), 50(원의 반지름)"으로 작성해야 한다.  

 

 

 

- href : 링크 사이트 경로를 의미한다.

 

- rel : 현재 문서와 링크 문서 사이의 관계를 의미한다.

- target : 현재 창에서 링크 사이트를 열것인지 새 창에서 열것인지를 설정한다. ( _blank : 새창에서 열기 / _parent, _self, _top 등)

- type : 링크 문서의 미디어 유형을 의미한다.

- media : 링크 문서를 어떤 미디어에 최적화시킬지 정한다.

- download : 링크를 클릭했을 때 링크 문서를 다운로드한다.

 

5. <area> 태그를 이미지에 설정하고 싶은 링크 개수만큼 작성한다. 위에 옥수수수염차와 스타벅스는 <area> 태그를 2개 작성했다.