カスタム検索

<area>タグ

<area>タグの機能と属性
機能 イメージマップの座標とリンクを定義する
属性 HTML-4.01 コア 言語 イベント  フォーカス  shape  coords  href  nohref  alt  
XHTML-1.0 コア 言語 イベント  フォーカス  shape  coords  href  nohref  alt  
備考 空要素
XHTML2では廃止になっている

<area>タグは<map>によって定義されたイメージマップの画像を領域に分け、分けた領域の画像にリンク先を定義します。

shape

shape属性を指定すると、イメージマップの画像を領域に分ける際の形を指定することができます。指定できる値は、

  • circ(円形)
  • poly(多角形)
  • rect(長方形)

です。

このshape属性を指定しない場合はデフォルト値(初期値)が指定されているとみなされ、画像全体を領域とします。結果として、長方形(rect)の領域を指定していることになります。ただし、coords属性によってrectの形式で(値を4つ記述する)指定しなければ、領域として定義されないようです。

coords

coords属性はリンクを指定する画像の領域の場所と大きさを指定します。値はxとy座標の形式で指定し、shape属性で指定された形によって、指定方法も異なります。

画像の座標は、左上がx軸, y軸の順で、 (0, 0)になります。指定された数値はピクセル数になります。

指定した領域が別に指定した領域と重なる場合は、先に指定した領域が適用されます。また、指定した領域が画像そのものの領域を超えてしまう場合、超えてしまった領域は無視されます。

circ(円形)の場合

shape属性にcircが指定されていた場合、中心の座標と半径の長さを指定します。

<area shape="circ" coords="x, y, r" />

この場合、xとyが円の中心の座標を表し、rが半径を表しています。

poly(多角形)の場合

polyが指定されていた場合、xとyの座標のセットが多角形のそれぞれの頂点を表します。例えば、三角形を指定するのなら、xとyの値のセットを3セット記述します。

指定するのは多角形で、最初に指定した頂点と、最後に指定した頂点が結ばれることは明らかなので、最初に指定した頂点を最後にもう一度指定する必要はありません。

<area shape="poly" coords="x1, y1, x2, y2, x3, y3, x4, y4, x5, y5, x6, y6" />

この場合、6つの頂点を指定し、6角形を定義しています。

rect(四角形)の場合

rectの場合は、xとyの座標のセットを2セット記述し、最初のセットが四角形の左上の頂点を表し、次のセットが右下の頂点を表します。

shape属性を指定しなかった場合、この方法で領域を指定します。

<area shape="rect" coords="x1, y1, x2, y2" />

href

href属性には、定義された領域がクリックされたときのリンク先を指定します。値にはリンク先のパスを記述します。パスは相対パスでも、絶対パスでも構いません。

nohref

nohref属性はイメージマップの中で、<area>タグは定義するが、リンク先を設定しない場合に記述しておきます。値にはnohrefを指定します(「nohref="nohref"」と記述します)。

alt

<img>タグのalt属性を同じように、画像の代わりに表示されるテキストを指定します。ただし、<img>タグでは画像全体にわたって代わりのテキストを指定しますが、<area>タグでのalt属性の指定は、定義された領域に対して代わりとなるテキストを指定します。

<area>の使用例

<area>タグを使用して様々な領域を定義した例です。リンクはせず、nohref属性を記述しています。確認ページで確認できるようにtitle属性を付け加えていますので、画像の上にマウスポインタを重ねたりして確認してみてください。

area.html
<html>
    <head>
        <title>イメージマップの例</title>
    </head>
    <body>
        <img src="/images/example/map_sample.gif" alt="選択用画像" usemap="#map" />
        <map name="map">
            <area shape="circ" coords="100,100, 99" nohref="nohref" alt="円" title="円" />
            <area shape="poly" coords="300,0, 399,199, 200,199" nohref="nohref" alt="三角" title="三角" />
            <area shape="poly" coords="66,200, 132,200, 198,266, 198,332, 132,398, 66,398, 0,332, 0,266" nohref="nohref" alt="六角" title="六角" />
            <area shape="rect" coords="200,200, 399,399" nohref="nohref" alt="長方形(正方形)" title="長方形(正方形)" />
        </map>
    </body>
</html>
CopyLeft 2021 Webデザインレッスン プライバシーポリシー サイト管理者に連絡