<map> - クリッカブルマップ

■ 概要

項　　目説　　明
記述形式 <map name="マップ名">～</map>
対応ブラウザー H3+ / e2+ / N2+ / Fx1+ / Op6+ / Ch1+ / Sa1+
種　　類
（カテゴリー）		 フロー・コンテンツ，フレージング・コンテンツ，パルパブル・コンテンツ  
置ける場所 フレージング・コンテンツが記入できる場所
内包要素
（コンテンツ・モデル）		 親要素の内包要素
（コンテンツ・モデル: トランスペアレント）

■ 解説

<map> は <img> により表示された画像をいくつかの範囲に分けて，複数のリンクを設定するためのものです。

ひとつの画像上のクリックする場所によって別のリンク先にジャンプする機能をクリッカブルマップと呼びます。　クリッカブルマップにはサーバーサイド・クリッカブルマップと，クライアントサイド・クリッカブルマップの２種類がありますが，<map> はクライアントサイド・クリッカブルマップを実現します。

クライアントサイド・クリッカブルマップはすべての処理をブラウザー側で実行するもので，img要素, map要素, area要素だけで作成できます。

name属性により，このクリッカブルマップに名前をつけて，img要素の usemap属性でこれを参照します。

より具体的な クライアントサイド・クリッカブルマップの作成手順 は，以下の通りです。

  1. map 要素 の中に，（通常複数の） area 要素 を用いて，
    いくつかの幾何学的な領域とそれに対応するリンク先の一覧
    を作成して含めます。
  2. マップ名 を map 要素 の name 属性 の値によって指定します。
  3. 対象となる画像 は，img 要素 を用いて src 属性 で指定するか，または，object 要素 を用いて data 属性 で指定します。
  4. この画像を表示する要素で，usemap 属性 の値として マップ名 （map 要素 の name 属性 の値）を
    usemap ="#マップ名"
    という形式で指定することによって，クリッカブルマップが作成できます。

■ 属性

種　　類名　　称
【固有属性】 name
【グローバル属性】 accesskey，class，contenteditable *， dir，
hidden *，id， lang，spellcheck *，style，
tabindex，title，translate *
【ARIA role属性】 で
指定可能な値 （役割）		 なし
【ARIA aria-* 属性】 で
指定可能なもの		 ARIA グローバル状態とプロパティ   

■ CSSプロパティ

種　　類名　　称
【よく使うもの】 color，background-color，font，font-size，font-family

■ 使用例

HTMLソース
HTML
<body> ～ </body>		 
<p>
   <img src="image/map.gif" alt="mapテスト画像" 
      usemap="#maptest" height="71" width="246">
</p>
<map name="maptest">
   <area shape="rect" coords="10,16,68,58" alt="HTML5" href="html5.html">
   <area shape="poly" coords="121,6,150,35,121,64,92,35"
      alt="CSS3" href="css/css3.html">
   <area shape="circle" coords="200,35,28" 
      alt="逆引きメニュー" href="how2/index_how2.html">
   <area shape="default" alt="Other" href="a.html">
</map>

ブラウザー 表示例

mapテスト画像

HTML5 CSS3 逆引きメニュー Other
HTML JavaScript CGI Other

■ 備考