클라이언트 측 이미지 맵(Client-side Image Map)이란?
클라이언트 측 이미지 맵은 하나의 이미지 안에서 영역별로 서로 다른 링크를 지정할 수 있는 기술입니다. 예를 들어, 세계지도 이미지에서 각 대륙을 클릭하면 해당 국가의 페이지로 이동하도록 만들 수 있습니다.
클라이언트 측 이미지 맵은 <img /> 태그에 usemap 속성을 추가하여 활성화되며, <map>과 <area> 태그를 통해 클릭 가능한 영역을 정의합니다.
usemap 속성의 동작 원리
맵으로 사용할 이미지는 일반적인 <img /> 요소로 페이지에 삽입하되, 추가적으로 usemap 속성을 지정해야 합니다.
usemap 속성의 값은 뒤에서 살펴볼 <map> 요소의 name 속성 값 앞에 샤프(#) 기호를 붙인 형태입니다. 이를 통해 이미지와 맵 정의가 서로 연결됩니다.
예제 코드
다음 코드를 실행하면 마우스를 각 영역 위에 올렸을 때 해당 튜토리얼 이름이 입력 상자에 표시되는 클라이언트 측 이미지 맵을 확인할 수 있습니다.
<html>
<head>
<title>Using JavaScript Image Map</title>
<script type="text/javascript">
<!--
function showTutorial(name) {
document.myform.stage.value = name
}
//-->
</script>
</head>
<body>
<form name="myform">
<input type = "text" name = "stage" size = "20" />
</form>
<!-- Create Mappings -->
<img src="/images/usemap.gif" alt="HTML Map" border="0" usemap="#tutorials"/>
<map name="tutorials">
<area shape="poly"
coords="74,0,113,29,98,72,52,72,38,27"
href="/perl/index.htm" alt="Perl Tutorial"
target="_self"
onMouseOver="showTutorial('perl')"
onMouseOut="showTutorial('')"/>
<area shape="rect"
coords="22,83,126,125"
href="/html/index.htm" alt="HTML Tutorial"
target="_self"
onMouseOver="showTutorial('html')"
onMouseOut="showTutorial('')"/>
<area shape="circle"
coords="73,168,32"
href="/php/index.htm" alt="PHP Tutorial"
target="_self"
onMouseOver="showTutorial('php')"
onMouseOut="showTutorial('')"/>
</map>
</body>
</html>주요 속성 설명
shape 속성
<area> 태그의 shape 속성은 클릭 영역의 모양을 결정합니다. 지원하는 값은 다음과 같습니다.
- rect: 사각형 영역 (좌측 상단 x, y 좌표와 우측 하단 x, y 좌표 4개 필요)
- circle: 원형 영역 (중심 x, y 좌표와 반지름 3개 필요)
- poly: 다각형 영역 (각 꼭짓점의 x, y 좌표를 나열)
coords 속성
coords 속성에는 shape 속성에서 정한 모양에 따라 픽셀 단위의 좌표 값을 지정합니다. 좌표는 이미지의 좌측 상단을 (0, 0)으로 하는 기준으로 계산됩니다.
JavaScript 이벤트 연동
이 예제의 핵심은 onMouseOver와 onMouseOut 이벤트입니다. 마우스 커서가 특정 영역 위에 올라오면 showTutorial() 함수가 호출되어 폼의 텍스트 상자에 'perl', 'html', 'php' 등의 이름이 표시되고, 커서가 벗어나면 값이 비워집니다.
이처럼 이미지 맵의 각 <area> 요소에는 일반 HTML 요소와 동일하게 JavaScript 이벤트 핸들러를 적용할 수 있으므로, 툴팁 표시, 강조 효과, 동적 콘텐츠 변경 등 다양한 인터랙션을 구현할 수 있습니다.