SYNCER

SYNCER

<map要素> - イメージマップ

公開日:

map要素は、イメージマップを表す要素です。この要素を使って、img要素などのオブジェクトとarea要素を関連付けることができます。

概要

名前
map
カテゴリー
Flow content
Phrasing content
Palpable content
配置できる場所
Phrasing contentが期待される場所。
コンテンツモデル
Transparent。
タグの省略
開始タグも終了タグも省略できません。
DOM Interface
HTMLMapElement
デフォルトのスタイル
map {
	display: inline;
}
仕様書
https://html.spec.whatwg.org/multipage/embedded-content.html#the-map-element

属性

name

イメージマップの名前。オブジェクト(img要素など)のusemap属性から参照される。

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

map要素の役割は、オブジェクトと領域を紐付けることです。前提として、area要素の知識が不可欠です。例えば、画像と領域を結び付けるには次のようにマークアップして下さい。map要素にname属性で名前を付けて、img要素のusemap属性に、先頭にハッシュ(#)を付けてそれを指定します。

HTML

<!-- 画像とイメージマップを関連付ける -->
<img src="./image.png" usemap="#my-map">

<map name="my-map">
	<area shape="circle" coords="100,100, 50" href="./other-page.html">
</map>

複数のオブジェクトから、同じイメージマップを参照しても問題ありません。

HTML

<!-- 複数の画像と1つのイメージマップを関連付ける -->
<img src="./image1.png" usemap="#my-map">
<img src="./image2.png" usemap="#my-map">
<img src="./image3.png" usemap="#my-map">

<map name="my-map">
	<area shape="circle" coords="100,100, 50" href="./other-page.html">
</map>

イメージマップには、複数のarea要素を含めることができます。例えば、1つの日本地図の画像に都道府県別のリンク領域を設定する、といったことも可能です。

HTML

<!-- 1つの画像に複数の領域を関連付ける -->
<img src="./japan-map.png" usemap="my-map">

<map name="my-map">
	<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>

前の要素が、後の要素に被さります。つまり、重なった部分をクリックした時は前の要素が優先されます。そのため、領域の並びは重要です。この性質を利用して、前の要素にhref属性をあえて指定しないことで、領域の中に空白を作ることも可能です。

HTML

<!-- 重なった部分をクリックした場合、page1.htmlに遷移する -->
<map name="my-map">
	<area shape="rect" coords="0,0, 50,50" href="./page1.html">
	<area shape="rect" coords="25,25, 75,75" href="./page2.html">
</map>

<!-- 重なった部分をクリックした場合、何も起こらない -->
<map name="my-map">
	<area shape="rect" coords="0,0, 50,50">
	<area shape="rect" coords="25,25, 75,75" href="./page.html">
</map>

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】<map要素> - イメージマップ</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/map/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>map要素は、オブジェクトと領域を紐付けるための要素です。領域を定義したarea要素を子要素に入れて利用します。</p>

<h2>circle</h2>
<p><img src="/image/author/200.png" usemap="#my-circle"></p>
<map name="my-circle">
	<area shape="circle" coords="100,100, 50" href="./other-page.html">
</map>

<h2>rect</h2>
<p><img src="/image/author/200.png" usemap="#my-rect"></p>
<map name="my-rect">
	<area shape="rect" coords="50,50, 150,150" href="./other-page.html">
</map>

<h2>poly</h2>
<p><img src="/image/author/200.png" usemap="#my-poly"></p>
<map name="my-poly">
	<area shape="poly" coords="0,0, 200,0, 0,200" href="./other-page.html">
</map>

	</body>
</html>

デモを開く

デモ

</head><body>までを含めて下さい。

<body> <div id="___body">

</div> <script>...</script> </body> </html>

<style>

</style>

<script>

</script>