HTML DOM 영역 객체

<시간/>

HTML DOM 영역 개체는 HTML의 이미지 맵과 연결됩니다. Area는 기본적으로 이미지 맵 내에서 클릭 가능한 영역을 나타냅니다.

이미지 개체는 개체 내에서 요소를 만들고 액세스하는 데 도움이 됩니다. 사용자 입력에 따라 지도 내에서 클릭 가능한 영역을 변경하거나 이미지 지도의 모양 등을 변경할 수 있습니다. 영역 요소 내부의 링크를 조작하는 데에도 사용할 수 있습니다.

속성

다음은 Area Object의 속성입니다 -

값	설명
alt	alt 속성 값을 설정하거나 반환합니다.
좌표	지역의 코드 속성을 설정하거나 반환합니다.
해시	href 속성 값의 앵커 부분을 설정하거나 반환합니다.
호스트	href 속성 값의 호스트 이름과 포트 부분을 모두 설정하거나 반환합니다.
호스트 이름	href 속성 값의 호스트 이름 부분을 설정하거나 반환합니다.
참조	영역의 href 속성 값을 설정하거나 반환합니다.
noHref	영역의 nohref 속성 값을 설정하거나 반환합니다. HTML5에서 더 이상 사용되지 않습니다.
원산지	href 속성 값의 프로토콜, 호스트 이름 및 포트 부분을 반환합니다.
비밀번호	href 속성 값의 비밀번호 부분을 설정하거나 반환합니다.
경로 이름	href 속성 값의 경로 이름 부분을 설정하거나 반환합니다.
포트	href 속성 값의 포트 부분을 설정하거나 반환합니다.

예시

영역 개체의 예를 살펴보겠습니다 -

<!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>Click the button to create an AREA element with a link to "Maya City", which is one of the New Seven Wonders of the World.</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 = "The AREA element was created, and
      you can now click on Maya City.";
   }
</script>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM 영역 객체

CLICK IT 버튼을 클릭한 후 -

HTML DOM 영역 객체

이제 "Maya city"를 클릭하면 해당 Wikipedia 페이지로 이동합니다.

위의 예에서 -

태그를 사용하여 이미지를 포함하고 너비, 높이 및 ID를 지정했습니다.

<img data-fr-src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/New7Wonders.jpg/276pxNew7Wonders.jpg" width="400" height="300" usemap="#7Wonders">

그런 다음 나중에 이미지, 영역 및 기타 항목을 추가할 빈 지도를 만들었습니다.

<map id="WonderWorld" name="7Wonders"></map>

그런 다음 myWonder() 함수를 실행할 CLICK IT라는 버튼을 만들었습니다.

<button onclick="myWonder()">CLICK IT</button>

myWonder() 함수는 먼저 요소를 만들고 변수 x에 할당합니다. href, 모양 및 코드와 같은 다양한 속성을 설정하십시오. 마지막으로 변수 x와 연결된 요소를 자식 노드로 이미지 맵에 추가하고 생성된 영역 요소도 표시합니다. 이제 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 = "The AREA element was created, and
   you can now click on Maya City.";
}