WebMaster Index

area

<area> タグはひとつの画像に対し、画像内の任意の位置にリンクを設定することができます。これをクライアントサイドイメージマップと呼びます。img タグ、map タグと合わせて使用します。

shape=””
リンク範囲の形状
coords=””
リンク範囲の座標
href=””
リンク先ファイルの URL
alt=””
代替テキスト
target=””
リンク先の表示方法

リンク範囲の形状 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 へ移動します。

area のプレビュー画像

四角 丸 三角 その他の領域
投稿日時
2020年8月25日 00:00
カテゴリー
HTML タグ
タグ