[HTML_Objects] JS - <map> 객체 - 이미지맵 (= map태그 = 이미지맵태그) ※ 이미지 특정 부분에 링크

1. <map> 객체 정의 - 이미지맵
2. <map> 객체 구문
3. <map> 객체 예제 - 접근
4. <map> 객체 예제 - 생성
5. <map> 객체 집합
6. <map> 객체 속성

<map> 객체 정의 - 이미지맵

 

HTML <map> 태그(요소) 의미.

 

<map> 객체 구문

 

[접근]

var x = document.getElementById("요소ID");

 

[생성]

var x = document.createElement("MAP");

 

<map> 객체 예제 - 접근

 

<img src="https://i.imgur.com/TpbgVeE.gif" width="389" height="26" border="0" usemap="#hz">

<map name="hz" id="hz">

  <area shape="rect" coords="4,3,68,21" href="http://naver.com" target="_blank" onFocus="blur()">

  <area shape="rect" coords="78,4,119,20" href="http://daum.net" target="_blank" onFocus="blur()">

  <area shape="rect" coords="128,5,193,19" href="http://www.paran.com" target="_blank" onFocus="blur()">

  <area shape="rect" coords="204,3,259,20" href="http://nate.com" target="_blank" onFocus="blur()">

  <area shape="rect" coords="269,2,323,20" href="http://www.google.co.kr/" target="_blank" onFocus="blur()">

  <area shape="rect" coords="331,4,385,18" href="http://kr.yahoo.com/" target="_blank" onFocus="blur()">

</map>

<button onclick="homzzang()">클릭</button>

<p id="demo"></p>

<script>

function homzzang() {

  var x = document.getElementById("hz").areas.length;

  document.getElementById("demo").innerHTML = x;

}

</script> 

 

결과보기 

<map> 객체 예제 - 생성

 

<img src="https://i.imgur.com/TpbgVeE.gif" width="389" height="26" border="0" usemap="#hz">

<button onclick="homzzang()">클릭</button>

<p id="demo"></p>

<script>

function homzzang() {

  var x = document.createElement("MAP");

  x.setAttribute("id", "hz");

  x.setAttribute("name", "hz");

  document.body.appendChild(x);

  var y = document.createElement("AREA");

  y.setAttribute("href", "https://naver.com");

  y.setAttribute("shape", "rect");

  y.setAttribute("coords", "4,3,68,21");

  document.getElementById("hz").appendChild(y);

  document.getElementById("demo").innerHTML = "생성완료. 클릭 가능.";

}

</script>

 

결과보기

<map> 객체 집합

 

area

imagemap의 모든 <area> 요소 집합 반환.

 

images

imagemap과 관련된 모든 <img> 및 <object> 요소의 집합 반환. 

 

<map> 객체 속성

 

name

imagemap의 name 속성값 설정/반환. 

 

※ <map> 객체는 표준 속성/메서드/이벤트 지원.