HTML DOM area オブジェクト

HTML DOM Area オブジェクト：画像マップエリアの詳細

**説明:** この記事では、HTML DOM の area オブジェクトについて、そのプロパティ、メソッド、使用方法を詳しく解説し、area オブジェクトを使った画像マップの作成を支援します。

一、Area オブジェクトとは？

  • Area オブジェクトは、画像マップ内の領域を表します。
  • 画像マップは、画像の異なる領域を異なる URL にリンクすることを可能にします。
  • Area オブジェクトは、常に <map> 要素と共に使用され、画像マップの領域を定義します。

二、Area オブジェクトのプロパティ

  1. coords 属性:
    • 領域の座標を定義します。
    • 値は、領域の形状 (rect, circle, poly) によって異なります。
    • 例: coords="0,0,100,100" は、左上の座標が (0,0)、右下の座標が (100,100) の矩形領域を表します。
  2. download 属性:
    • 領域をクリックした際にダウンロードするリソースのファイル名を指定します。
  3. href 属性:
    • 領域のリンク先 URL を指定します。
  4. hreflang 属性:
    • リンク先 URL の言語を指定します。
  5. media 属性:
    • リンク先 URL のメディアタイプを指定します。
  6. rel 属性:
    • 現在のドキュメントとリンク先 URL の関係を指定します。
  7. shape 属性:
    • 領域の形状を定義します。
    • 選択可能な値: rect (矩形), circle (円形), poly (多角形), default (デフォルト領域)
  8. target 属性:
    • リンクをどのウィンドウまたはフレームで開くかを指定します。
    • 選択可能な値: _blank, _self, _parent, _top またはフレーム名
  9. type 属性:
    • リンク先 URL の MIME タイプを指定します。

三、Area オブジェクトの使用シーン

  • インタラクティブな画像の作成: 画像の異なる領域を異なるページやコンテンツにリンクします。
  • 画像マップの実装: ユーザーは画像上の異なる領域をクリックして、関連情報を得ることができます。
  • Web ページのユーザビリティの向上: 画像にクリック可能な領域を追加することで、ユーザーのナビゲーションとインタラクションを容易にします。

四、Area オブジェクトの例


<img src="image.jpg" usemap="#myMap">
<map name="myMap">
  <area shape="rect" coords="0,0,100,100" href="page1.html" alt="領域 1">
  <area shape="circle" coords="200,200,50" href="page2.html" alt="領域 2">
</map>

まとめ: HTML DOM Area オブジェクトは、画像マップを作成するための強力な機能を提供します。画像上にクリック可能な領域を定義し、それらを異なる URL にリンクすることで、Web ページのインタラクティブ性とユーザーエクスペリエンスを向上させることができます。

関連Q&A

Q1: area要素のshape属性で"poly"を使う場合、coords属性にはどのような値を設定する必要がありますか？

A1: "poly"を使う場合、coords属性には多角形の各頂点の座標をカンマ区切りで指定します。座標はx座標とy座標のペアで、左上が(0,0)となります。例えば、三角形の場合 "0,0,100,0,50,100" のように指定します。

Q2: area要素でalt属性は必須ですか？

A2: はい、alt属性は必須です。alt属性は、画像が表示されない場合や、スクリーンリーダーを使用しているユーザーに対して、領域の説明を提供するために使用されます。alt属性を省略すると、アクセシビリティが低下する可能性があります。

Q3: `` 要素と `` 要素の関係は？

A3: `` 要素は、 `` 要素と組み合わせて使用され、画像マップを定義します。 `` 要素の `usemap` 属性に、 `` 要素の `name` 属性と同じ値を設定することで、両者を関連付けます。