HTMLMapElement - HTMLのmap要素

JavaScript

// 要素を作成する
var element = document.createElement( "map" ) ;	// <map></map>

// 属性をセットする
element.name = "hoge" ;	// →<map name="hoge"></map>

// area要素を作成する
var areaElement = document.createElement( "area" ) ;	// <area>
areaElement.shape = "circle" ;	// →<area shape="circle">
areaElement.coords = "100,100, 50" ;	// →<area shape="circle" coords="100,100, 50">
areaElement.href = "./page.html" ;	// →<area shape="circle" coords="100,100, 50" href="./page.html">

// area要素を追加する
element.appendChild( areaElement ) ;	// →<map name="hoge"><area shape="circle" coords="100,100, 50" href="./page.html"></map>

HTML

<map name="my-map" id="hoge">
	<area shape="circle" coords="100,100, 50" href="./link.php?page=北海道">
	<area shape="rect" coords="0,0, 50,50" href="./link.php?page=青森県">
	<area shape="poly" coords="50,50, 100,100, 100,50" href="./link.php?page=岩手県">
</map>

JavaScript

// 要素を取得する
var element = document.getElementById( "hoge" ) ;	// <map name="my-map" id="hoge"> ... </map>

// 所属するarea要素を取得する
var elements = element.areas ;	// HTMLCollection

// HTMLCollectionの内容
elements[0] ;	// <area shape="circle" coords="100,100, 50" href="./link.php?page=北海道">
elements[1] ;	// <area shape="rect" coords="0,0, 50,50" href="./link.php?page=青森県">
elements[2] ;	// <area shape="poly" coords="50,50, 100,100, 100,50" href="./link.php?page=岩手県">