最終更新日
area要素は、テキスト付きハイパーリンクを構成する、イメージマップ上のそれぞれの領域を示します。area要素は空要素で、終了タグはありません。map要素の子要素として、Phrasingコンテンツの記述箇所で使用できます。
href属性によって、area要素でのハイパーリンクの定義が可能です。画像が表示されない環境のためにも、リンク先を示すテキスト情報として、alt属性の指定が必須でしょう。href属性を持たないarea要素は、選択不可の領域を示します。その場合にはalt属性の指定も省略されるべきでしょう。なおtitle属性を使うと、各領域にマウスポインタを合わせたときのツールチップ用テキストを指定できます。
また、href属性を指定したときは、target、rel、media、hreflang、typeの各属性も指定可能です。target属性では、リンク先ページの表示方法について指定します。また、rel、media、hreflang、typeの各属性を使うと、ユーザーがリンクをたどる前に、リンク先についての情報を示せるようになります。
area要素のshape属性とcoords属性を組み合わせて指定することにより、イメージマップ上でのそれぞれの領域の形状と座標を指定できます。shape属性では、各領域の形状をキーワードで指定します。また、coords属性では、shape属性で指定した形状の座標を、カンマで区切った整数の並びで指定します。この場合、X座標はCSSのピクセル内でマップ画像の左端からの距離、Y座標はCSSのピクセル内でマップ画像の上端からの距離となります。
カテゴリ | タグの省略 | 親要素 | 子要素 |
---|---|---|---|
Flowコンテンツ Phrasingコンテンツ |
空要素 | map要素 / map要素内のPhrasingコンテンツを子にできる要素 | なし |
属性 | 値 | 説明 |
---|---|---|
alt | 文字列 | リンク先を表すテキストを指定します。 |
coords | 数値 | shape属性で指定した形状での領域の座標を指定します。整数をカンマで区切って指定します。 |
shape | rect circle poly |
イメージマップ内の領域の形状を指定します。「rect」(四角形)は、左上のX座標とY座標、右下のX座標とY座標の4つの整数を順に並べます。「circle」(円)は、中心のX座標、中心のY座標、半径の3つの整数を順に並べます。「poly」(多角形)は、頂点1のX座標とY座標、頂点2のX座標とY座標、頂点3のX座標とY座標、頂点4のX座標とY座標、…というような感じで整数を順に並べます。 |
href | URL | リンク先文書のURLを指定します。 |
target | 文字列 | リンクの表示先を、キーワードかウィンドウ名で指定します。キーワードは4つあり、「_self」は現在のウィンドウ、「_parent」は親ウィンドウ、「_top」は最上位のウィンドウ、「_blank」は新しいウィンドウに、それぞれ表示されます。 |
rel | リンクタイプ | リンク先文書との関係を指定します。 |
media | メディアタイプ | リンク先文書のメディアタイプを指定します。 |
hreflang | 言語コード | リンク先文書の言語を指定します。 |
type | MIMEタイプ | リンク先文書のファイルの種類を指定します。 |
グローバル属性 | - | - |
イベント属性 | - | - |
<body> <h1>モーニングセット</h1> <p>下記の画像をクリックすると、それぞれの商品ページに移動します。</p> <p> <img src="morning.jpg" usemap="#morningset"> <map name="morningset"> <area href="muffin.html" shape="circle" coords="120,140,110" alt="マフィン"> <area href="potato.html" shape="rect" coords="10,50,70,90" alt="ポテト"> <area href="coffee.html" shape="rect" coords="70,10,140,40" alt="コーヒー"> </map> </p> </body>