이미지 위에 클릭 가능한 영역을 만들고 싶다면 이미지 맵(Image Map)을 활용하면 됩니다. 이미지 맵은 하나의 이미지 안에서 클릭하는 위치에 따라 서로 다른 링크로 이동할 수 있게 해주는 기능입니다. 예를 들어, 같은 이미지 안에서 사각형 부분을 클릭하면 한 웹사이트로 이동하고, 삼각형 부분을 클릭하면 다른 웹사이트로 이동하도록 설정할 수 있습니다.
<area> 태그란?
이미지 내부의 클릭 영역은 <area> 태그로 정의합니다. 이 태그는 반드시 <map> 태그 안에 중첩되어야 하며, 각 영역의 모양과 좌표, 이동할 링크를 지정할 수 있습니다.
<area> 태그의 주요 속성
| 번호 | 속성 및 설명 |
|---|---|
| 1 | alt 해당 영역에 대한 대체 텍스트를 지정합니다. 접근성 향상을 위해 필수적으로 사용하는 것이 좋습니다. |
| 2 | coords 클릭 가능한 영역의 좌표를 정의합니다. shape 값에 따라 좌표 형식이 달라집니다. |
| 3 | download 하이퍼링크를 클릭했을 때 대상 파일을 다운로드하도록 설정합니다. |
| 4 | shape 영역의 모양을 지정합니다. rect(사각형), circle(원), poly(다각형) 등을 사용할 수 있습니다. |
| 5 | target 링크된 URL이 열릴 위치를 지정합니다. 예를 들어 _blank는 새 창에서 열립니다. |
예제 코드
아래 코드를 실행하면 하나의 이미지 안에서 여러 개의 클릭 가능한 영역을 확인할 수 있습니다. 다각형(poly), 사각형(rect), 원(circle) 세 가지 shape를 모두 사용한 예제입니다.
<!DOCTYPE html> <html> <head> <title>HTML area Tag</title> </head> <body> <img src = /images/usemap.gif alt = "usemap" usemap = "#lessons"/> <map name = "lessons"> <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27" href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" /> <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial" href = "/html/index.htm" target = "_blank" /> <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial" href = "/php/index.htm" target = "_blank" /> </map> </body> </html>
실행 결과
위 코드를 브라우저에서 실행하면 이미지 위에서 마우스 커서가 클릭 가능한 영역에 올라갔을 때 포인터로 변경되며, 해당 영역을 클릭하면 지정된 웹사이트가 새 창으로 열립니다.
정리
이미지 맵은 <img> 태그에 usemap 속성을 추가하고, <map> 태그 안에 <area> 태그들을 배치하여 구현합니다. 좌표(coords)와 모양(shape)만 정확히 지정하면 하나의 이미지로도 다양한 인터랙션을 제공할 수 있어, 배너나 인포그래픽 등에 유용하게 활용됩니다.