イメージマップ

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も必要ありません。

HTML のクライアント側イメージマップは、次の 2 つの部分で構成されます。

1. タグに埋め込まれている実際の画像<img>。画像タグには、この画像に使用するイメージマップを指定する属性 usemapが必要です(1 ページに複数のイメージマップが存在する場合があります)。
2. 要素<map>とその内部の<area>要素。各要素はイメージマップ内の 1 つのクリック可能な領域を定義します。これらは、通常の Web リンクで開くURL<a> tagの定義に似ています。デスクトップ ユーザーがマウス ポインターをその領域に置いたときにツールヒントとして表示される属性が提供される場合があります。Webアクセシビリティの理由から、スクリーン リーダーソフトウェアが、たとえば視覚障碍のあるユーザー向けに読み上げることができるリンクを説明する属性を提供することがしばしば重要であり、場合によっては法律上または契約上の要件となることもあります。^[3]titlealt

要素<area>は、長方形 ( shape="rect")、多角形 ( shape="poly")、または円 ( shape="circle") になります。形状値は座標のペアです。各ペアには X 値と Y 値 (画像の左/上から) があり、カンマで区切られます。

• 長方形: 4つの座標を設定します: "x1,y1,x2,y2"
• 多角形: 必要な数の座標を設定します (2 の倍数): "x1、y1、x2、y2、[...] xn、yn"
• 円: 1 つの座標ペアと半径を持つ別の値: "x1,y1,radius"

次の例では、長方形の領域 ("9,372,66,397") を定義します。ユーザーがこの領域内の任意の場所をクリックすると、英語版 Wikipediaのホームページに移動します。

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

最近のアプローチは、 CSS絶対位置指定を使用して画像にリンクを重ねることですが、これは長方形のクリック可能な領域のみをサポートします。この CSS テクニックは、純粋な HTML イメージ マップを正しく再スケーリングできない可能性があるiPhoneでイメージ マップを適切に動作させるのに適している可能性があります。

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

テキストエディタでイメージマップを作成するには多くの時間と労力がかかるため、ベクターグラフィックエディタで図形を作成するのと同じように、Webデザイナーがイメージマップを迅速かつ簡単に作成できるように設計されたアプリケーションが数多くあります。これらのアプリケーションの例としては、AdobeのDreamweaverやKImageMapEditor（KDE用）、GIMPのイメージマッププラグインなどがあります。無料のオープンソースオフィススイートLibreOfficeにも専用のイメージマップエディタが含まれています。^[4]

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

スケーラブルベクターグラフィックス（SVG）画像形式は、画像にハイパーリンク^[6]やその他のより洗練された形式のインタラクティブ性^[7]を追加するための独自のメカニズムを提供するため、SVG形式のベクター画像を扱う場合、従来の画像マップ技術は通常必要ありません。

• ミステリーミートナビゲーション