イメージマップ

HTMLおよびXHTMLにおいて、イメージマップとは、特定の画像に関連する座標のリストであり、画像内の特定の領域を異なるリンク先にリンクするために作成されます（通常の画像リンクでは、画像全体が単一のリンク先にリンクされます）。例えば、世界地図では、各国のハイパーリンクをその国の詳細情報にリンクさせることができます。イメージマップの目的は、画像を複数の画像ファイルに分割することなく、画像内の様々な部分を簡単にリンクできるようにすることです。

サーバーサイドイメージマップは、Mosaic（ウェブブラウザ）バージョン1.1で初めてサポートされました。 ^{[ 1 ]} サーバーサイドイメージマップを使用すると、ウェブブラウザはユーザーが画像内のどこをクリックしたかの位置情報​​をサーバーに送信できます。これにより、サーバーは応答として返すコンテンツをピクセル単位で決定できます（可能な方法としては、イメージマスクレイヤー、データベースクエリ、またはサーバー上の構成ファイルの使用があります）。

このタイプのサーバーサイドイメージマップの HTML コードでは、タグが<img>アンカー タグ内にあり<a>...</a>、属性<img>が含まれている必要がありますismap。

<a href="/imagemapper"> < img src = " image.png " ismap " / > </a>​

ユーザーが画像内をクリックすると、ブラウザはX座標とY座標（画像の左上隅を基準とした座標）をクエリ文字列としてアンカーURLに追加し、結果として得られるURLにアクセスします^{[ 2 ]}（例：）。/imagemapper?3,9

ブラウザがサポートしていない場合はismap、クエリ文字列をアンカーURLに追加してはならず、サーバーは適切に応答する必要があります（たとえば、テキストのみのナビゲーションページを返すなど）。

クライアントサイドイメージマップはHTML 3.2で導入され、サーバー側で特別なロジックを実行する必要はありません（完全にクライアントサイドで動作します）。また、 JavaScriptも必要ありません。

< img src = "image.png" alt = "ウェブサイト マップ" usemap = "#mapname" /> <マップ名= "mapname" > < areashape = "rect" coords = "9,372,66,397" href = "https://en.wikipedia.org/" alt = "Wikipedia" title = " Wikipedia" /> </ map >

クライアント側のイメージマップはテキストエディタを使って手動で作成することも可能ですが、そのためにはWebデザイナーはHTMLのコーディング方法と、画像上に配置したい領域の座標を列挙する方法を知っている必要があります。結果として、手動でコーディングされたイメージマップのほとんどは単純な多角形になります。

テキストエディタでイメージマップを作成するには多くの時間と労力がかかるため、多くのアプリケーションは、Webデザイナーがベクターグラフィックエディタで図形を作成するのと同様に、イメージマップを迅速かつ簡単に作成できるように設計されています。

クリック可能な領域が明確でないイメージマップは、ユーザーに「ミステリーミートナビゲーション」というリスクをもたらします。たとえ明確であっても、どこに誘導されるのかが分かりにくい場合があります。これは、ロールオーバー効果によって部分的に改善できます。^{[ 4 ]}

スケーラブルベクターグラフィックス（SVG）画像フォーマットは、ハイパーリンク^{[ 5 ]}やその他のより高度なインタラクティブ機能^{[ 6 ]}を画像に追加するための独自のメカニズムを提供するため、SVG形式のベクター画像を扱う場合、従来のイメージマップ技術は一般的に必要ありません。

• 謎の肉のナビゲーション