areaタグ
areaは、クリッカブルマップのリンクエリアを設定するタグです。
解説
areaタグは、mapタグの子要素としてリンク領域を指定するために使用します。
リンク領域の指定は、shape属性で円形、三角形、多角形を指定し、
coords属性で位置を座標で指定します。
コンテンツ・モデル
| カテゴリー (自カテゴリ) | フロー・コンテンツ フレージング・コンテンツ |
| コンテキスト (親カテゴリ) | mapタグ |
| コンテンツ・モデル (子カテゴリ) | なし |
属性
areaタグには以下の属性が指定できます。
| 属性 | 説明 |
|---|---|
| alt | 代替テキスト （例）alt="ねこ" ※href属性を指定する場合は必須です。 |
| shape | リンクエリアの形を指定する （circle：丸、rect：四角形、poly：多角形） （例）shape="circle" |
| coords | リンクエリアの座標を指定する 座標の指定方法はshapeで指定した形により異なります。 circleの場合：x座標, y座標, 半径 rectの場合：左上x座標, 左上y座標, 右下x座標, 右下y座標 polyの場合：1番目のx座標, 1番目のy座標, 2番目のx座標, 2番目のy座標 ... |
| href | リンク先を指定する （例）href="test.html" |
| target | ターゲットを指定する （例）target="_blank" |
| title | 補足情報を指定する （例）title="テスト" |
| 属性 | 説明 |
|---|---|
| class | クラスを指定する （例）class="hoge" |
| id | IDを指定する （例）id="foo" |
| style | スタイルを指定する （例）style="color:red;" |
その他のグローバル属性値については、グローバル属性をご覧ください。
サンプル
クリッカブルマップ（丸、三角、四角）を指定する
<img src="map.png" usemap="#mss" alt="マップ">
<map name="mss">
<area href="maru.html" shape="circle" title="丸" coords="80,56,38" alt="丸">
<area href="sankaku.html" shape="poly" title="三角" coords="215,18,170,95,260,95" alt="三角">
<area href="shikaku.html" shape="rect" title="四角" coords="312,20,392,95" alt="四角">
</map>
図形の箇所にのみリンクが設定されています。
備考
- mapタグの子要素としてareaタグは複数指定できます。
- 座標位置を決める時は、表示と設定を微調整しながら決定してください。
