area要素
area要素は、イメージマップのいくつかのテキストとイメージマップの対応するエリア、またはデッド・エリアでのハイパーリンクのいずれかを表します。また、area要素は、祖先にmap要素またはtemplate要素を持つ必要があります。
例)
<object data="image_map.jpg" type="image/jpeg" usemap="#shapes" width="500" height="200"> <map name="shapes"> <area shape=circle coords="100,100,50" href="blue.html" alt="青い円形" target="_blank"> <area shape=rect coords="200,50,300,150" href="red.html" alt="赤い四角形." target="_blank"> <area shape="poly" coords="400,50,450,88,432,150,367,150,350,88" href="green.html" alt="緑の五角形" target="_blank"> </map> </object>
表示)
alt属性
画像が利用不可の際に使用する代替テキストを指定します。area要素がhref属性を持つ場合はalt属性が必須です。alt属性の値は、ハイパーリンクを表すテキストであり、なおかつ、画像の代替となるような内容のテキストを指定します。
例)
<area shape="poly" coords="400,50,450,88,432,150,367,150,350,88" href="green.html" alt="緑の五角形" target="_blank">
shape属性
shape属性は、イメージマップ内に作成する図形の種類を指定します。値は以下のキーワードです。
キーワード
- circle(円形。)
- rect(長方形、矩形。)
- poly(多角形。)
- default(イメージマップ全体の画像。ただし、coords属性の値を持つことはできません。)
例)
<area shape="poly" coords="400,50,450,88,432,150,367,150,350,88" href="green.html" alt="緑の五角形" target="_blank">
coords属性
coords属性は、イメージマップのshape属性に指定した図形の座標を指定します。値はイメージマップの左上端を(0,0/X座標,Y座標)とする整数で、X座標、Y座標は( , )半角カンマで区切ります。座標の記述は、以下のとおりです。
なお、、HTML5よりcircle状態(shape="circle")の場合の半径の値の単位にパーセントを使うことができなくなりました。
- shape="circle"の場合。
中心のX座標,Y座標,半径。 - shape="rect"の場合。
長方形の左上頂点のX座標, Y座標,右下頂点のX座標,Y座標。 - shape="poly"
多角形の左頂点または、最頂点のX座標,Y座標,時計回りに次の頂点のX座標,Y座標,…X座標,Y座標,…、と角の数だけX座標,Y座標を記述します。なお、値は、6個以上の偶数個の整数を指定が条件となっていますが、三角以上(四角形はrect状態)の頂点のX軸、Y軸をペアで指定しますので、問題は無いと思います。
なお、画像のX座標、Y座標は、画像編集ソフトで開き、座標を調べたい場所にカーソルやポインタを合わせると、リソースのプロパティを表示する欄などに座標が現れます。以下の画像は、Windows付属のペイントで画像を開いたところです。緑色の五角形の最頂点の座標(400,50/X座標,Y座標)を表しています。
例)
<area shape="poly" coords="400,50,450,88,432,150,367,150,350,88" href="green.html" alt="緑の五角形" target="_blank">
href属性
href属性はハイパーリンクのURLを指定します。
例)
<area shape="poly" coords="400,50,450,88,432,150,367,150,350,88" href="green.html" alt="緑の五角形" target="_blank">
target属性
target属性は、ハイパーリンクやフォームから移動するときのデフォルトで表示される位置を指定します。値は有効なブラウジング コンテキストの名前、または、キーワードです。
なお、HTML5より、例えば、iframe要素と組み合わせて使用するなど、この属性がアプリケーションに有用であるならば非推奨でなくなりました。
キーワード
- _blank
新しいウィンドウやタブを開き、表示します。 - _self
現在のブラウジング コンテキストに表示します。 - _parent
現在のブラウジング コンテキストより1つ上位のブラウジング コンテキストに表示します。なお、表示する対象が存在しない場合は現在のブラウジング コンテキストに表示します。 - _top
現在のブラウジング コンテキストを含む最上位のブラウジング コンテキストに表示します。なお、表示する対象が存在しない場合は現在のブラウジング コンテキストに表示します。
例)
<area shape="poly" coords="400,50,450,88,432,150,367,150,350,88" href="green.html" alt="緑の五角形" target="_blank">
hreflang属性
リンクされたリソースの言語を表します。値は、ja、enなどBCP47言語タグを指定します。
type属性
リンクされたリソースのMIMEタイプを表します。値は、text/htmlや、text/cssなどMIMEタイプを指定します。
rel属性
rel属性はリンクのタイプ(関係)を指定します。値はキーワードです。キーワードとその概要は以下の一覧をご覧下さい。
キーワード
- alternate(ハイパーリンク)
現在のドキュメントの代替表現を指定します。 - author(ハイパーリンク)
現在のドキュメントまたは記事の作成者へのリンクを指定します。 - bookmark(ハイパーリンク)
最も近い祖先のセクションへのパーマリンクを指定します。 - help(ハイパーリンク)
コンテキストに対応するヘルプへのリンクを指定します。 - license(ハイパーリンク)
著作権、ライセンスのドキュメントへのリンクを指定します。 - next(ハイパーリンク)
シリーズの次のドキュメントへのリンクを指定します。 - nofollow(注釈)
参照される文書を推奨しないことを表します。 - noreferrer(注釈)
ユーザー・エージェントがHTTPリファラ(SIC)のヘッダーを送信しないように要求します。 - prefetch(外部リソースへのリンク)
キャッシュにダウンロードする画像やCSSなどのリソースファイルを指定します。 - prev(ハイパーリンク)
シリーズの前のドキュメントへのリンクを指定します。 - search(ハイパーリンク)
現在のドキュメントと、関連するページを検索するために使用できるリソースへのリンクを指定します。 - tag(ハイパーリンク)
現在のドキュメントに適用されるタグを指定します。
download属性
download属性は、対応しているユーザー・エージェントに対して、リソースをナビゲートする代わりにダウンロードして使用するためのハイパーリンクであることを表します。値は、ユーザーがリンクをクリックしたときに開く保存プロンプトなどローカル・ファイル・システムが使用するデフォルトのファイル名を指定します。値を指定しない場合は、href属性で指定しているファイル名が使用されます。→Firefox 33.1の保存プロンプトの画像。
使用可能な値に制限はありません。ただし、ファイルシステムがサポートしていない文字(\ / ? : * " > < |)は、ユーザー・エージェントはそれに応じてファイル名を調整する可能性があります。
- カテゴリ
- フロー・コンテンツ、フレージング・コンテンツ。
- 要素を使用することができる場所
- フレージング・コンテンツが使用できる場所(先祖にmap要素またはtemplate要素が存在する場合のみを除きます)。
- コンテンツ モデル(内容に含めることのできる要素)
- -
- コンテンツ属性
- グローバル属性、alt属性、shape属性、coords属性、href属性、target属性、hreflang属性、type属性、rel属性、download属性。
- この要素に追加された属性
- hreflang属性、type属性、rel属性。
- この要素で変更があった属性
- coords属性、target属性。
- この要素で廃止された属性
- nohref属性。