HTML5でイメージマップを構築する方法 - ダミー

Webページでは、ナビゲーションに画像を使用することがよくあります。プレーンテキストリンクよりもきれいですし、1つの要素でページにフォームと関数の両方を追加できます。アンカー要素を持つ

要素を使用してリンクイメージを作成すると、そのイメージにリンクを1つだけ添付できます。ページ上の異なる地域へのリンクをつなぐ大きな画像を作成するには、 イメージマップが必要です。

イメージマップを作成するには、2つのものが必要です。

<！例えば、公園の画像は、遊び場、ピクニックエリア、および池エリアを示すことができる。

• マップ上の異なる領域を異なるURLにマップするためのマークアップ

  要素と属性

• 要素を使用して、他の画像と同様にマップ画像をページに追加します。さらに、usemap属性をインクルードして、イメージマップ情報がそのイメージと共に表示されることをブラウザに知らせます。 usemap属性の値はマップの名前です。

<！ - 2 - >

2つの要素と属性のコレクションを使用してイメージマップを定義します。

mapはマップ情報を保持します。 map要素はname属性を使用してマップを識別します。 nameの値は、マップに含まれる

要素のusemapの値と一致する必要があります。

エリアは、マップの特定の部分をURLにリンクします。 area要素は、これらの属性を使用して、マップの各セクションの詳細を定義します。

• <！ - 3 - >

  形状：領域の形状（イメージマップを動作させるクリック可能なホットスポット）を指定します。 rect（長方形）、circle、およびpoly（三角形または多角形）から選択できます。

• coords：地域の座標を定義します。

  矩形の座標は、左、右、上、下の点を含む。

  • 円の座標には、円の中心と円の半径のx座標とy座標が含まれます。

  • ポリゴンの座標は、ポリゴンの各頂点のx座標とy座標の集合です。

    画像座標を決定するには、Mapeditなどの画像マップエディタやPaintShop Photo Proなどのグラフィックスエディタを使用できます。 Mapeditはそれらの座標も記録します。

    href：リージョンがリンクするURLを指定します（絶対または相対）。

    alt：イメージ領域の代替テキストを提供します。

    マークアップ

  • 以下は、09fg08-navmapというグラフィックスファイルにリンクされたNavMapという3領域マップを定義しています。 gif：

  • この図は、ブラウザがこのマークアップをどのように表示するかを示しています。

マウスが地図上のある領域の上に座ると、カーソルは指す手に変わります（他のハイパーリンクと同じように）。タイトルテキストを活用して、リンクに関する有益な情報を含めるとともに、視覚障害者が地図にアクセスしやすくします。

イメージマップの一般的な用途は、場所（州、国など）のマップをリンク可能なマップに変換することです。使用できるオンラインリソースは次のとおりです：

About。 comイメージマップチュートリアルでは、手作業でイメージマップを構築する方法について詳しく説明しています。

HTMLGoodiesには、イメージマップのチュートリアルや情報が豊富に用意されています。

手でイメージマップを作成するのは難しいことがあります。イメージエディタを使用してマップ内の各ポイントを特定し、

• し、

• 適切なマークアップを作成します。ほとんどのHTMLツールには、イメージマップの作成に役立つユーティリティが含まれています。このようなツールを利用すれば、迅速かつエラーの少ないイメージマップを作成できます。

イメージマップを使用する場合は注意が必要です。視覚的援助（例えば、そこに示されている異なる国へのリンクを持つ地図のようなもの）を作成している場合は、イメージマップを使用するのが理にかなっています。一方、メインナビゲーションにはイメージマップを使用しないでください。 あなたは結果を気に入らないかもしれませんが、結果は気に入っていません！） メインWebサイトのナビゲーションには常にHTMLとCSSを使用するか、グラフィックイメージマップを使用する必要がある場合は、視覚障害のあるサイト訪問者が代わりに代わりのコントロールを使用してナビゲートできるように、そのマップと一緒に使用します。

一般的に、ナビゲーションのための最良の方法は、ボタンラベルにテキストを使用し、ボタンを作成する作業をCSSが処理するようにすることです。