この画像に似たマップのホバー効果をマークアップしてコーディングする方法を考えています。
各地区 (またはセクション) がマウスオーバー/タッチ/クリックされたときに、他のセクションに影響を与えずに色を変更する必要があります。各セクションの境界は画像を代表するものである必要があり、正方形であってはなりません。私が取り組んでいるサイトは古いブラウザーで使用できる必要があるため、このソリューションではキャンバスを使用できません (個人的にはがっかりです)。
理想的には、JavaScript や大量の画像を使用せずに、CSS でこれを行いたいと考えています。誰もこれを以前にやったことがありますか？
編集：人々がタグを提案していることは知っていますが、知る<area>限り、それは :hover 擬似クラスを受け入れません。
編集 2: 私はこれを使用するかもしれません: http://www.netzgesta.de/mapper/
別の自己回答...
数か月前、Raphael JS というライブラリに出会いました - http://raphaeljs.com/。なじみのない人のために説明すると、これは何よりもまず SVG DOM ライブラリです。SVG について少しでも知っていれば、IE ではサポートされていませんが、VML はサポートされていることがわかります。ラファエルもこれに対応しています。すごいですよね？
とにかく、マップの AI ファイルを SVG ファイルとして保存し、パスを JSON ブロックにインポートして、基本的に次のコードと同じことを行いました: http://raphaeljs.com/australia.html
私が遭遇した唯一の問題：
HTML<area>タグが使える
ここで問題が何であるかはわかります。たとえば、世界地図を通常の方法で作成するのはかなりの負荷です。私が正しければ、あなたが望むのは、領土マップ画像を持ち、ホバー領域が国境と正確に一致するホバー効果を配置することです. 地図はSVGでも構いませんが（描画部分は既にできています）、問題はSVG地図座標を使ってHTMLエリアマップを生成する方法です。PHPを使用してSVGをRaphaelに変換する（座標を生成する）解決策があります（試してみましたが、少なくとも提供されたデモでは見栄えがします）。しかし、そのためには raphael.js が必要です...気が変わったら: https://github.com/atirip/svg2raphael。また、Raphael に慣れていない場合は、慣れるまでに時間がかかります。ドキュメントは、私にとってはあまり良くありません。
編集: SVG->rapahel.js からの変換が機能することを確認できますが、SVG ファイルには微調整が必要です。svg2raphael で提供されている SVG の例に見られるように、ファイルは Adobe Illustrator で作成されました。Inkscape の SVG (プレーン) を試してみましたが、正しく動作しませんでしたが、次のように問題を修正できました。
<path style="fill:#ff0000" ...></path>(fill="none" を設定します!!! 結果は見えませんが、正しく翻訳されます。style <path fill="#ff0000" ...></path>="" 内のすべてを無視するようです。編集 2: Inkscape の style="" を使用して、SVG に適用する CSS ルールを作成できます。これは、SVG/Raphael の外でスタイルを維持するのに最適です!
jQuery を使用する場合は、maphilight プラグインを使用できます。http://davidlynch.org/projects/maphilight/docs/で文書化されており、 https://github.com/kemayo/maphilightの github から入手できます。