HTML DOM Map 객체 완벽 정리 – 주요 속성과 실전 예제

HTML DOM의 Map 객체는 HTML 문서 내의 <map> 요소를 자바스크립트로 제어할 수 있도록 해주는 인터페이스입니다. <map> 요소는 이미지맵(image map)을 정의할 때 사용되며, 이미지의 특정 영역을 클릭 가능한 링크로 만들 수 있습니다.

기본 문법

<map> 요소를 새로 생성하는 방법은 다음과 같습니다.

var mapObject = document.createElement("MAP")

주요 속성(Properties)

생성된 mapObject에서 사용할 수 있는 컬렉션과 속성은 아래와 같습니다.

컬렉션 / 속성	설명
areas	<map> 안에 포함된 모든 <area> 요소들의 컬렉션을 반환합니다.
images	해당 맵과 연결된 모든 <img> 및 <object> 요소들의 컬렉션을 반환합니다.
name	<map> 요소의 name 속성값을 설정하거나 반환합니다. 이미지의 usemap 속성과 연동되는 핵심 값입니다.

실전 예제: areas 컬렉션 활용하기

아래 예제는 버튼을 클릭하면 이미지 위의 특정 영역(피라미드 부분)에 하이퍼링크를 동적으로 추가하는 코드입니다.

<!DOCTYPE html>
<html>
<head>
<title>Map areas collection</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Map-areas-collection</legend>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/New7Wonders.jpg/276px-New7Wonders.jpg" width="250" height="150" usemap="#7Wonders">
<map id="WonderWorld" name="7Wonders">
</map>
<div id="divDisplay"></div>
<input type="button" value="Apply Link" onclick="myWonder()">
</fieldset>
</form>
<script>
    function myWonder() {
        var divDisplay = document.getElementById("divDisplay");
        var newArea = document.createElement("AREA");
        newArea.setAttribute("href", "https://en.wikipedia.org/wiki/Giza_pyramid_complex");
        newArea.setAttribute("shape", "rect");
        newArea.setAttribute("coords", "120,10,10,40");
        document.getElementById("WonderWorld").appendChild(newArea);
        divDisplay.textContent = "Link was applied, hover and click on pyramid of giza.";
    }
</script>
</body>
</html>

코드 설명

usemap="#7Wonders": 이미지가 name이 "7Wonders"인 맵과 연결됩니다.
document.createElement("AREA"): 클릭 가능한 영역을 나타내는 새로운 <area> 요소를 생성합니다.
shape="rect", coords="120,10,10,40": 사각형 형태의 클릭 영역 좌표를 지정합니다.
appendChild(newArea): 생성한 영역을 <map> 요소에 추가하여 링크를 활성화합니다.

실행 결과

위 코드를 실행하면 다음과 같은 화면을 볼 수 있습니다.

'Apply Link' 버튼 클릭 전 – 이미지에 어떤 링크도 적용되어 있지 않습니다.

HTML DOM Map 객체 완벽 정리 – 주요 속성과 실전 예제

'Apply Link' 버튼 클릭 후 – 기자 피라미드 영역에 링크가 적용되어, 해당 부분에 마우스를 올리고 클릭하면 위키백과 페이지로 이동합니다.

HTML DOM Map 객체 완벽 정리 – 주요 속성과 실전 예제

정리

HTML DOM Map 객체는 이미지맵을 동적으로 구성할 때 유용하게 활용됩니다. 특히 areas 컬렉션을 사용하면 페이지 로드 후에도 자바스크립트만으로 클릭 영역을 추가하거나 수정할 수 있어, 인터랙티브한 이미지 UI를 만드는 데 효과적입니다.