[HTML 기초] 이미지맵 / 하나의 이미지 안에 여러 개의 링크 걸기

 

이미지맵은 하나의 이미지에 여러 개의 링크를 걸어야 할 때, 이미지의 특정한 영역에 링크를 걸어야할 때 사용한다.

 

이미지맵은 사각형 이미지맵, 원형 이미지맵, 다각형 이미지맵 세가지 유형이 있다.

다각형 이미지맵은 효율이 떨어져서 잘 사용하지 않으니 이미지맵 제너레이터를 사용하자.
https://www.image-map.net/ > 이미지맵 제너레이터 주소

 

<1> 사각형 이미지맵 링크 만들기

<!--사각형 이미지맵-->
<img src="이미지 경로" usemap="#coupon_down">
<map name="coupon_down">
  <area shape="rect" coords="111,555,444.600" href="#" alt="쿠폰 다운로드">
</map>

 

• <img> 태그의 usemap 속성과 <map> 태그의 name 속성을 일치시켜줘야한다. (usemap 속성에는 #을 붙여줄 것.)
• 사각형 이미지 맵이기 때문에 area shape="rect"
• coords 속성은 좌표.
  coords = "왼쪽 상단 x, y 좌표값, 오른쪽 상단 x, y 좌표값"

 

<사용 예시>

마우스 커서가 안보이지만... 쿠폰 다운받기 부분에만 클릭이 된다.

---

<2> 원형 이미지맵 링크 만들기

<!--원형 이미지맵-->
<img src="img/browsers.png" usemap="#browser">
<map name="browser">
  <area shape="circle" coords="72,98,54" href="#" alt="" title="브라우저">
</map>

 

• 사각형 이미지맵과 마찬가지로 <img> 태그의 usemap 속성과 <map> 태그의 name 속성을 일치시켜줘야한다. (usemap 속성에는 #을 붙여줄 것.)
• 원형 이미지맵이기 때문에 area shape="circle"
• coords = "원의 중앙 x좌표, y좌표, 원의 반지름"

 

<사용예시>

여러개의 이미지를 링크해 줄 때는 map 태그 안의 area 태그를 여러개로 사용하면 된다. 각 브라우저 이미지마다 클릭된다.

---

📌 좌표값 확인하는 방법

그림판으로 좌표값을 확인할 이미지를 불러오면 커서의 위치에 해당하는 좌표값을 밑에 노란색 박스 표시가 되어있는 부분에서 확인해 볼 수 있다.
해당 이미지의 좌표값은 x축 73px, y축 96px이다.

 

📌 원의 반지름 구하기

위와 마찬가지로 그림판에서 Select 선택 > 반지름 만큼 드래그 해주면 밑에 노란 박스 표시에서 반지름을 알 수 있다.
해당 이미지에서는 가로 길이가 5px이고 세로 길이가 52px이니 52px이 원의 반지름이다.