<area>要素の使い方・サンプルコード
<area>
<area>要素は、<map>要素の中でホットスポット領域(クリック可能な場所)を設定することができます。
![【HTMLサンプル】<map>と<area>要素を使ったイメージマップの作り方](https://codeforfun.jp/wp-content/uploads/2020/01/thumb-html-image-map-640x360.png)
属性
alt
画像が表示されない・表示できない場合に、代わりに表示するテキストです。HTML5 では href 属性を使用する場合に必須になります。
<area shape="circle" coords="50, 50, 10" href="https://sample.com" alt="sample.comを表示">
coords
ホットスポット領域の座標をピクセル値で指定します。
shape 属性に指定した値によって書き方が異なります。
shape=”circle” を指定した場合
circle(円形)の場合は、円の中心を「x, y」半径を「r」で指定します。
<area shape="circle" coords="x, y, r">
shape=”rect” を指定した場合
rect(四角形)の場合は、左上の座標を「x1, y1」右下の座標を「x2, y2」とします。
<area shape="rect" coords="x1, y1, x2, y2">
shape=”poly” を指定した場合
poly(多角形)の場合は、各頂点の座標を「x, y」を必要な頂点の数だけ書きます。
例)六角形の場合
<area shape="poly" coords="x1, y1, x2, y2, x3, y3, x4, y4, x5, y5, x6, y6">
download
href 属性で指定したファイルをダウンロードするようにウェブブラウザに示します。
download 属性に指定した値がダウンロード時のファイル名になります。
例)sample.png が image というファイル名で保存されるコード
<area shape="circle" coords="50, 50, 10" href="sample.png" download="image">
href
この領域のハイパーリンクの URL を指定します。
<area shape="circle" coords="50, 50, 10" href="https://sample.com">
hreflang
リンク先のファイルの言語を指定します。href 属性を用いる場合にのみ使用します。
<area shape="circle" coords="50, 50, 10" href="https://sample.com" hreflang="ja">
ping
ブラウザによって送信される URL のリストです。通常トラッキングに使用されます。
rel
リンク先の内容の役割をリンク種別の値で指定します。href 属性を用いる場合にのみ使用します。
<area shape="circle" coords="50, 50, 10" href="https://sample.com" rel="noreferrer">
shape
ホットスポット領域の形を指定します。
- circle(円)
- rect(四角形)
- poly(多角形)
を指定できます。
target
リンク先のファイルを開く場所・コンテキスト(ブラウザのタブ・ウィンドウなど)を指定します。href 属性を用いる場合にのみ使用します。
属性値 | |
---|---|
_self(既定値) | 表示中のページと同じウィンドウにリンク先のページを表示します。 |
_blank | 新しいタブ・ウィンドウでリンクを開きます。 |
_parent | 現在閲覧中のタブ・ウィンドウの親コンテキストにリンク先のページを読み込みます。親がない場合は _self と同じ動きをします。 |
_top | トップレベル(親を持たない)の閲覧コンテキストにリンク先のページを読み込みます。親がない場合は _self と同じ動きをします。 |
例)新しいタブでリンクを表示するコード
<area shape="circle" coords="50, 50, 10" href="https://sample.com" target="_blank">
グローバル属性
全ての HTML 要素に共通して使用できるグローバル属性はこちら
使用例
イメージマップのデモ(実際にクリックすることができます)
<map name="sample">
<area shape="rect" coords="175, 70, 290, 220" href="picture.html" alt="壁掛け">
<area shape="circle" coords="100, 214, 30" href="leaf.html" alt="葉っぱ">
<area shape="poly" coords="50, 340, 75, 354, 75, 385, 50, 400, 25, 385, 25, 354" href="plant.html" alt="鉢植え">
</map>
<img usemap="#sample" src="image.jpg" alt="Image"/>
このコードの詳しい解説は「<map>と<area>要素を使ったイメージマップの作り方」をお読みください。
対応ブラウザ
関連するタグ
- <map>:イメージマップ (クリック可能な領域)を作成