MAP 태그 사용(이미지에 링크 달기)

이미지맵 설명

이미지맵은 이미지의 원하는 위치에 링크를 달 수 있습니다.

 

<area> 태그의 shape 속성을 통해 rect(사각형), circle(원형), poly(다각형) 등의 모형의 링크를 만들 수 있습니다.

 

<img>의 속성 usemap 과 <map>의 속성 name 의 값으로 연결 시켜 주고,

 

<area>를 통해 링크를 만들어 줍니다.

 

<area>의 coords의 값으로 좌표를 지정해 줍니다.

 

*이미지의 위치가 변경되어도 이미지안에서의 좌표이기 때문에 걸어놓은 링크는 변하지 않습니다.

 

 

코드 사용 예제

<div class="cover">
  <img src="imgMap.png" usemap="#link"alt="링크이미지">
      <map name="link">
      <area shape="rect" coords="87,70,238,120" href="http://www.naver.com" alt="네이버 ㄱㄱ">
      <area shape="rect" coords="238,70,386,120" href="http://www.daum.net" alt="다음 ㄱㄱ">
      <area shape="rect" coords="386,70,536,120" href="http://www.google.com." alt="구글 ㄱㄱ">
  </map>
</div>

 

 

참고사이트

이미지맵 좌표 값 편하게 찾는 사이트입니다.

http://maschek.hu/imagemap/imgmap/

maschek.hu - Online Image Map Editor

 

---

개인 공부용으로 만들었습니다. 
다른 분들에게도 도움이 되었으면 좋겠습니다. 
틀린 부분이 있으면 댓글을 남겨주시면 수정하겠습니다.

imgMap.zip

다운로드