area : イメージマップのパーツ

カテゴリ

例

<img src="shapes.png" usemap="#shapes" alt="">
<map name="shapes">
 <area shape=rect coords="50,50,100,100">
 <area shape=rect coords="25,25,125,125" href="red.html" alt="">
 <area shape=circle coords="200,75,50" href="green.html" alt="">
 <area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="">
 <area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" href="yellow.html" alt="">
</map>

説明

イメージマップの個々のパーツ。指定した座標がハイパーリンクになる。 href属性で遷移先文書のURLを指定する。他ファイルへリンクする方法参照。 href属性を指定しない場合はリンクしない。

属性 属性値の見方

alt[文字列]
リンクの代替テキスト。href属性を指定してる場合は必須。
coords[正の整数](,[正の整数])*
座標。shape属性の項を参照。
download  new(真偽値)|[文字列]edge △ ie ✗ ios ✗
リンク先に遷移するのではなくダウンロードする。ただし同一オリジンまたはdataスキームの場合に限る。
文字列を指定すると、そのファイル名でダウンロードされる。ただし同一オリジンまたはdataスキームでContent-Disposition HTTPヘッダーでファイル名の指定が無い場合に限る。
href[URL]
リンク先のURL
hreflang  new[言語コード]
リンク先リソースの言語コード。jaとかenとかfrとか。Living Standardでは、areaでは消えているが、aのほうには残っている。
ping  未来[URL]( [URL])*chrome △ opera △ firefox ✗ edge △ ie ✗ safari △ ios △ android △
リンクをクリックした時に、列挙されたURLにそれぞれバックグラウンドでmethod=postでリクエスト本体がPINGになっているリクエストを送る。リファラーは無しだが、ping-from HTTPヘッダーにリンク先URLを、ping-to HTTPヘッダーに送信先ping属性のURLを入れる。ping-fromはping先ドメインが違う時には入らない。Cookieとかの認証情報は入れる。

広告の効果測定とかに使う。そういう目的なので、ブラウザはping先ドメインをツールチップで表示するとか何らか分かるようにする必要がある。

referrerpolicy  new[列挙型]edge ✗ ie ✗ safari ✗ ios ✗
リファラー（REFERER）をリクエスト時に送信するかどうかを指定する。Referrer Policyに則ったキーワードを指定する。
rel  new[列挙型]( [列挙型])*edge △ ie △
リンク先のリソースとの関係。仕様書に記載がある値は以下の通り(これらに限定されない)。
  • alternate: その文書の代替(hreflang属性と併用して別言語版など)。type属性がapplication/rss+xmlかapplication/atom+xmlの場合はいわゆるRSSリーダーでの購読用のURLを示す。ブラウザによってはこれに反応する。
  • author new: 著者
  • bookmark: 最も近い親セクション
  • external new: 外部サイト
  • help: ヘルプ
  • license new: ライセンス情報
  • next: 次の文書
  • nofollow new: 検索エンジン向けの対応。リンク先リソースを承認していない事を示す。SEO的にはリンク先の重要性に影響しないようにする
  • noopener new: window.openerが無い状態でリンク先を開く。ウィンドウ名を指定しても、常にtarget=_blankのようにリンク先を新規ウィンドウ/タブで表示する
  • noreferrer new: HTTP Refererを送信しない
  • prev: 前の文書
  • search new: サイト内検索。OpenSearchを指定できる。現在少なくともFirefox/IE/Chromeが対応している。
  • tag new: そのタグに関連付けられたページの一覧へのリンク。
HTML5で無くなったキーワードは以下。
  • start
  • contents
  • index
  • glossery
  • copyright
  • chapter
  • section
  • subsection
  • appendix
HTML5で追加されたけど廃止されたキーワードは以下。
  • prefetch
shape  変更circle|default|poly|rectedge △ ie △
イメージマップの基本形。これに応じてcoords属性で指定する値の数が変化する。デフォルトはrect。
  • circle: 円。coordsは[左辺からの距離],[上辺からの距離],[半径]。HTML4では半径にパーセンテージが指定できたが、HTML5では廃止された。
  • default: 画像全体。coordsは無し。
  • poly: 多角形。coordsは[左辺からの距離],[上辺からの距離]で頂点を繰り返して指定する。
  • rect: 四角形。coordsは[左辺から四角形左辺の距離],[上辺から四角形上辺の距離],[左辺から四角形右辺の距離],[上辺から四角形下辺の距離]。
target[ウィンドウ名]
開くウィンドウを指定。
type  new[MIMEタイプ]
Living Standardでは消えている
nohref
href属性を省略するだけで良い