HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのarea要素のcoords属性とは？イメージマップの座標指定方法を解説

HTMLのarea要素におけるcoords属性は、イメージマップ内のリンク領域（エリア）の座標を指定するために使用します。この属性はshape属性と組み合わせて使うことで、領域の形状やサイズを細かく定義することができます。

coords属性の基本構文

coords属性の基本的な書き方は以下の通りです。

<area coords="value">

座標値の指定方法

valueには、shape属性で指定した形状に応じて、以下のような座標パラメータを設定します。

x1,y1,x2,y2長方形（shape="rect"）の左上と右下の角の座標
x,y,radius円形（shape="circle"）の中心座標と半径
x1,y1,x2,y2,…,xn,yn多角形（shape="poly"）の各頂点の座標

実装例

それでは、area要素のcoords属性を使った具体的な実装例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h2>Learning</h2>
<p>Learn these technologies with ease....</p>
<img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>
<map name = "tutorials">
    <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
        href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" />
    <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
        href = "/html/index.htm" target = "_blank" />
    <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
        href = "/php/index.htm" target = "_blank" />
</map>
</body>
</html>

出力結果

HTMLのarea要素のcoords属性とは？イメージマップの座標指定方法を解説

コードの解説

上記の例では、まずimg要素にusemap属性を指定し、次のように画像とマップを関連付けています。

<img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>

続いて、map要素の中に、形状（shape）ごとのarea要素を定義しています。

<map name = "tutorials">
    <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
        href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" />
    <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
        href = "/html/index.htm" target = "_blank" />
    <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
        href = "/php/index.htm" target = "_blank" />
</map>

area要素を設定する際、coords属性を使って各領域の座標を次のように指定しています。たとえば長方形の場合は以下のようになります。

<area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
    href = "/html/index.htm" target = "_blank" />

coords属性を使う際のポイント

coords属性で指定する座標は、画像の左上を原点（0,0）としたピクセル単位の値です。画像編集ツールなどで正確な座標を測り、画像の実際のサイズに合わせて指定することで、意図した通りのクリック領域を作成できます。また、alt属性を必ず設定しておくことで、アクセシビリティの向上にもつながります。

  1. HTMLのvalue属性とは？使い方とサンプルコードをわかりやすく解説

    HTMLのvalue属性は、HTMLドキュメント内で要素の初期値（デフォルト値）を定義するための属性です。この属性は、button、input、meter、li、option、progress、paramといったHTML要素に対して使用できます。value属性はフォームやUIコンポーネントにおいて重要な役割を果たします。例えば、input要素では入力欄にあらかじめ表示されるテキストを指定でき、meter要素やprogress要素では現在の進捗状況を数値で表現できます。構文value属性の基本的な構文は以下のとおりです。<tagname value="text">

  2. HTMLのstyle属性とは？構文と使い方をサンプルコード付きで解説

    HTMLのstyle属性は、ドキュメント内の個々の要素に対してインラインスタイルを直接指定するための属性です。style属性はグローバル属性に分類されるため、すべてのHTML要素で使用できるのが特徴です。 style属性の基本 style属性の値には、「プロパティ名: 値;」という形式でCSSを記述します。複数のスタイルを同時に指定したい場合は、セミコロン（;）で区切って並べることで、1つの要素にまとめてスタイルを適用できます。 構文 style属性の基本的な構文は次のとおりです。 <タグ名 style="CSSプロパティ: 値;"></タグ名> そ