HTML 이미지 맵이란?
HTML 이미지 맵(Image Map)은 HTML 문서 안에서 하이퍼링크처럼 동작하는 클릭 가능한 영역을 가진 클라이언트 측 이미지 맵입니다. 하나의 이미지 위에 여러 개의 클릭 영역을 정의할 수 있어, 사용자가 이미지의 특정 부분을 클릭하면 해당 위치에 연결된 링크로 이동하게 됩니다.
<map> 요소와 <img> 요소 사이의 관계를 설정하려면, <map> 요소의 name 속성 값을 <img> 요소의 usemap 속성과 서로 연결해야 합니다. 이렇게 두 요소가 연결되면 브라우저는 이미지 위의 어느 영역이 클릭되었는지 판단하여 올바른 링크로 이동시킵니다.
문법
HTML 이미지 맵의 기본 문법은 다음과 같습니다.
<img src="" alt="" usemap="#name_value">
<map name="name_value">
<area shape="" coords="" href="" alt="">
<area shape="" coords="" href="" alt="">
</map>
<area> 태그의 주요 속성은 다음과 같습니다.
- shape: 클릭 영역의 모양을 지정합니다. (rect: 사각형, circle: 원, poly: 다각형)
- coords: 클릭 영역의 좌표를 픽셀 단위로 지정합니다.
- href: 해당 영역을 클릭했을 때 이동할 링크 주소를 지정합니다.
- alt: 스크린 리더 등을 위한 대체 텍스트를 지정합니다.
예제
실제 HTML 이미지 맵이 작동하는 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
text-align: center;
}
img {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h1>HTML Mapping Image</h1>
<img src="https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg" alt="Learn Hadoop" usemap="#hadoopImg">
<map name="hadoopImg">
<area shape="rect" coords="0,0,400,100" alt="Hadoop Logo" href="https://www.tutorialspoint.com/hadoop/images/hadoop.jpg" width="100" height="100">
</map>
<p>Click on the above logo</p>
</body>
</html>
위 코드에서는 <img> 태그에 usemap="#hadoopImg" 속성을 지정하고, <map> 태그의 name="hadoopImg" 값과 연결했습니다. 그리고 <area> 태그로 사각형(rect) 형태의 클릭 영역을 좌표(0,0,400,100)로 정의했습니다.
실행 결과
아래 이미지에서 하둡(Hadoop) 로고의 코끼리 부분을 직접 클릭해 보면, HTML 이미지 맵이 어떻게 작동하는지 확인할 수 있습니다. 로고 영역을 클릭하면 지정된 링크 페이지로 이동합니다.
