area
<area> タグはひとつの画像に対し、画像内の任意の位置にリンクを設定することができます。これをクライアントサイドイメージマップと呼びます。img タグ、map タグと合わせて使用します。
- 分類
- フローコンテンツ、フレージングコンテンツ
- 内包できるもの
- 空
属性
リンク範囲の形状 shape=””
リンク範囲の形状を指定します。
- rect
- 四角形(初期値)
- circle
- 円形
- poly
- 多角形
- default
- 画像全体
リンク範囲の座標 coords=””
- rect
- 左上と右下の角の座標(X1,Y1,X2,Y2)
- circle
- 中心点の座標と半径(X,Y,r)
- poly
- すべての角の座標(X,Y,X,Y, …)
- default
- 指定不要
リンク先ファイルの URL href=””
- URL
- リンク先の URL を指定します。
代替テキスト alt=””
- テキスト
-
- イメージマップが表示できなかった場合に表示する代替テキスト。
- リンク先が同じ area 要素が複数ありどれかに alt が指定されている場合は他の alt を省略可
- area に href を指定していない場合は alt 属性を指定しない
リンク先の表示方法 target=””
- _blank
- 新規ウインドウを開いて表示
- _self
- 同じウインドウ内で表示
- _parent
- 親ウインドウで表示(ひとつ上のフレームに表示)
- _top
- いちばん上のレベルのウインドウで表示(全フレームを解除しページ全体に表示)
- ウインドウ名, フレーム名
- 指定したフレームに表示
サンプルコード
<p><img src="abc.png" usemap="#map" width="600" height="400" /></p>
<map name="map">
<area alt="四角" coords="80,150,200,270" shape="rect" href="map1.html" />
<area alt="丸" coords="320.25,130.46,60" shape="circle" href="map2.html" />
<area alt="三角" coords="461.5,220.5,521.5,324.5,401.5,324.5" shape="poly" href="map3.html" />
<area alt="その他の領域" shape="default" href="map4.html" />
</map>
プレビュー
各図形をクリックすると該当するリンク先へ移動します。図形以外の部分は shape=”default” が指定されており、クリックすると指定された URL へ移動します。