HTML DOM Area 객체는 HTML의 이미지 맵(image map)과 연관된 객체입니다. Area는 기본적으로 이미지 맵 내부에서 클릭 가능한 영역을 나타냅니다.
<area> 요소는 자바스크립트를 통해 생성하고 접근할 수 있으며, 이를 활용하면 사용자 입력에 따라 맵 내부의 클릭 영역을 변경하거나 이미지 맵의 모양(shape) 등을 동적으로 수정할 수 있습니다. 또한 area 요소 내부의 링크를 조작하는 용도로도 활용할 수 있습니다.
Area 객체의 주요 속성
Area 객체에서 사용할 수 있는 주요 속성은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| alt | area 요소의 alt 속성값을 설정하거나 반환합니다. |
| coords | area의 좌표(coords) 속성값을 설정하거나 반환합니다. |
| hash | href 속성값 중 앵커(#) 부분을 설정하거나 반환합니다. |
| host | href 속성값 중 호스트명과 포트 부분을 함께 설정하거나 반환합니다. |
| hostname | href 속성값 중 호스트명 부분을 설정하거나 반환합니다. |
| href | area의 href 속성값을 설정하거나 반환합니다. |
| noHref | area의 nohref 속성값을 설정하거나 반환합니다. (HTML5에서 폐기됨) |
| origin | href 속성값 중 프로토콜, 호스트명, 포트 부분을 반환합니다. |
| password | href 속성값 중 비밀번호 부분을 설정하거나 반환합니다. |
| pathname | href 속성값 중 경로(pathname) 부분을 설정하거나 반환합니다. |
| port | href 속성값 중 포트 부분을 설정하거나 반환합니다. |
예제 코드
다음은 Area 객체를 활용한 실제 예제입니다.
<!DOCTYPE html>
<html>
<body>
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/New7Wonders.jpg/276pxNew7Wonders.jpg" width="400" height="400" usemap="#7Wonders">
<map id="WonderWorld" name="7Wonders">
</map>
<p>버튼을 클릭하면 '세계 7대 불가사의' 중 하나인 "Maya City"로 연결되는 AREA 요소가 생성됩니다.</p>
<button onclick="myWonder()">CLICK IT</button>
<p id="SAMPLE"></p>
<script>
function myWonder() {
var x = document.createElement("AREA");
x.setAttribute("href", "https://en.wikipedia.org/wiki/Maya_city");
x.setAttribute("shape", "circle");
x.setAttribute("coords", "124,58,16");
document.getElementById("WonderWorld").appendChild(x);
document.getElementById("SAMPLE").innerHTML = "AREA 요소가 생성되었으며,
이제 Maya City를 클릭할 수 있습니다.";
}
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
CLICK IT 버튼을 클릭한 후의 화면입니다.
이제 이미지 위의 "Maya city" 영역을 클릭하면 해당 위키피디아 페이지로 이동합니다.
코드 상세 설명
위 예제의 동작 방식을 단계별로 살펴보겠습니다.
먼저 img 태그로 이미지를 삽입하고, 너비·높이·usemap 속성을 지정했습니다.
<img data-fr-src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/New7Wonders.jpg/276pxNew7Wonders.jpg" width="400" height="300" usemap="#7Wonders">
그다음에는 나중에 area 요소를 추가할 수 있도록 비어 있는 map 요소를 생성했습니다.
<map id="WonderWorld" name="7Wonders"></map>
이어서 클릭 시 myWonder() 함수를 실행하는 CLICK IT 버튼을 만들었습니다.
<button onclick="myWonder()">CLICK IT</button>
myWonder() 함수는 먼저 AREA 요소를 생성하여 변수 x에 할당한 뒤, href, shape, coords 등 다양한 속성을 설정합니다. 마지막으로 해당 AREA 요소를 이미지 맵의 자식 노드로 추가하고, innerHTML을 통해 id가 "SAMPLE"인 문단에 생성 완료 메시지를 표시합니다. 이후 사용자는 이미지 위의 "Maya city" 영역을 클릭할 수 있게 됩니다.
function myWonder() {
var x = document.createElement("AREA");
x.setAttribute("href", "https://en.wikipedia.org/wiki/Maya_city ");
x.setAttribute("shape", "circle");
x.setAttribute("coords", "124,58,16");
document.getElementById("WonderWorld").appendChild(x);
document.getElementById("SAMPLE").innerHTML = "AREA 요소가 생성되었으며,
이제 Maya City를 클릭할 수 있습니다.";
}