断片に分割されたかなり複雑なマップを作成する必要があり、それ自体がかなり複雑な多角形構造になっています。これらは透過 PNG として提供されます。明らかに、長方形の PNG 自体を使用して、マウスに敏感な各領域を定義することはできません。
最初で最後に頭に浮かんだのは、Image-Maps の使用でした。
しかし、その道を進む前に、誰かがこれに対するより現代的な解決策を考えられるかどうか尋ねたいと思いましたか?
ブラウザのサポート要件は、IE >= 7、FF >= 3、新しい Chrome および Opera です。したがって、CANVAS の使用はオプションではない可能性があります。
SVG は良い選択です。古い IE バージョンとの互換性を追加するプラグインがあります。マップには特に問題はありませんが、通常のリンクのようにステータス バーに情報が表示されないため、リンク先が明確であることを確認してください。
Web ドキュメントをデザインするときは、自分の意図を表現するのに最も近いものを常に選択する必要があります。これにより、ドキュメントが思いもよらなかったユースケースに最も適応できるようになります。
イメージ マップは、マップ イメージにリンクを配置するのに最適です。<canvas>ドキュメントが解釈しにくくなります。SVG は、データにうまく適合する場合は妥当な選択ですが、イメージ マップほど広く実装されていません。
IE7 は SVG や Canvas を実行しません (Bradshaw 氏が指摘するようにプラグインが好きでない限り)。VML はそこで動作するかもしれませんが、それは泥沼です。マウスムーブでポイントインポリゴンを計算するためにJavaScriptを使用できます。しかし、実際には、イメージ マップ (クライアント側またはサーバー側のいずれか) がおそらく最も単純なアプローチです。