項 目 | 説 明 |
---|---|
記述形式 | <map name="マップ名">~</map> |
対応ブラウザー | H3+ / e2+ / N2+ / Fx1+ / Op6+ / Ch1+ / Sa1+ |
種 類 (カテゴリー) |
フロー・コンテンツ,フレージング・コンテンツ,パルパブル・コンテンツ |
置ける場所 | フレージング・コンテンツが記入できる場所 |
内包要素 (コンテンツ・モデル) |
親要素の内包要素 (コンテンツ・モデル: トランスペアレント) |
<map> は <img> により表示された画像をいくつかの範囲に分けて,複数のリンクを設定するためのものです。
ひとつの画像上のクリックする場所によって別のリンク先にジャンプする機能をクリッカブルマップと呼びます。 クリッカブルマップにはサーバーサイド・クリッカブルマップと,クライアントサイド・クリッカブルマップの2種類がありますが,<map> はクライアントサイド・クリッカブルマップを実現します。
クライアントサイド・クリッカブルマップはすべての処理をブラウザー側で実行するもので,img要素, map要素, area要素だけで作成できます。
name属性により,このクリッカブルマップに名前をつけて,img要素の usemap属性でこれを参照します。
より具体的な クライアントサイド・クリッカブルマップの作成手順 は,以下の通りです。
種 類 | 名 称 |
---|---|
【固有属性】 | name |
【グローバル属性】 | accesskey,class,contenteditable *,
dir, hidden *,id, lang,spellcheck *,style, tabindex,title,translate * |
【ARIA role属性】 で 指定可能な値 (役割) |
なし |
【ARIA aria-* 属性】 で 指定可能なもの |
ARIA グローバル状態とプロパティ |
種 類 | 名 称 |
---|---|
【よく使うもの】 | 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> |
ブラウザー 表示例 |
---|
|