HTML5：MAP要素

IMG 要素および任意のAREA要素の子孫と連動して、イメージマップを定義する。要素は、その子を表す。

例

イメージマップは、メンテナンスを容易にするために、ページ上の他の内容と組み合わせて定義できる。この例は、ページの上部に、イメージマップと下部のテキストリンクの対応する集合を使用したページである。

<!DOCTYPE HTML>
<HTML lang="EN">
<TITLE>Babies?: Toys</TITLE>
<HEADER>
 <H1>Toys</H1>
 <IMG src="../Sample/Picture_M.jpg"
      alt="Babies? navigation menu. Select a department to go to its page."
      usemap="#NAV">
</HEADER>
 ...
<FOOTER>
 <MAP name="NAV">
  <P>
   <A href="/clothes/">Clothes</A>
   <AREA alt="Clothes" coords="0,0,100,50" href="/clothes/"> |
   <A href="/toys/">Toys</A>
   <AREA alt="Toys" coords="100,0,200,50" href="/toys/"> |
   <A href="/food/">Food</A>
   <AREA alt="Food" coords="200,0,300,50" href="/food/"> |
   <A href="/books/">Books</A>
   <AREA alt="Books" coords="300,0,400,50" href="/books/">
  </P>
 </MAP>
</FOOTER>

name属性

この属性は存在しなければならず、ASCII 空白文字なしで非空白の値を持たなければならない。name 属性の値は、同じツリーで別の MAP 要素の name 属性の値と同じであってはならない。id 属性もまた指定される場合、両方の属性が同じ値を持たなければならない。

<IMG src="Com/usemap_Touka.gif"
 usemap="#NnameMap"
>
<MAP name=NnameMap>
 <P>
  <A href="/clothes/" target=Test>Clothes</A>
  <AREA alt="Clothes" coords="0,0,80,50" href="/clothes/" target=Test> |
  <A href="/toys/" target=Test>Toys</A>
  <AREA alt="Toys" coords="100,0,180,50" href="/toys/" target=Test>
 </P>
</MAP>

P、Aは意味ないと思うが。

<IMG src="Com/usemap_Touka.gif"
 usemap="#Nname2Map"
>
<MAP name=Nname2Map>
 <AREA alt="Clothes" coords="0,0,80,50" href="../Sample/Hn.htm" target=Test>
 <AREA alt="Toys" coords="100,0,180,50" href="../Sample/HTML_Bunnsyo.htm" target=Test>
</MAP>

HTML5

タグ（要素）

MAP

この要素を使用できる文脈

内容モデル

text/htmlにおけるタグ省略

内容属性

解説

例

name属性

テスト

スクリプト：

スクリプト：