アメリカの写真が掲載されたシンプルなウェブサイトを作りたいと思います。ユーザーが特定の状態にマウスを合わせると、その状態に関する情報をツールチップに表示したいと思います。
私が抱えている主な問題は、州の境界を守ってもらいたいということです。状態画像に非表示の長方形をオーバーレイしたくないのですが、ツールチップがすべての状態の輪郭に反応するようにしたいのです。
これを実行するための最も論理的な方法は何でしょうか？米国で使用している画像の種類（ビットマップベースとベクターベース）はありますか？
ご協力ありがとうございました！。
ブラウザの制限はありますか？SVG画像を使用すると、javascriptでクリックされた状態を簡単に検出できるためです。しかしもちろん、これは古いブラウザで完全にサポートされているわけではありません... !!
例としてSVG画像を作成しAdobe illustrator、画像をSVGとしてエクスポートし、HTMLでコードとして使用し（テキストエディターでsvg画像を開き、コードをコピーして貼り付ける必要があります）、そこからどの領域を定義するかを定義できます。クリック..
一番
方法1-通常のビットマップ画像（おそらくpng）で通常のHTMLを使用します。ツールチップ付きのイメージマップを使用します。円、長方形、多角形などを定義できます。簡単なHTMLであり、JavaScriptはありませんが、画像は静的です。
方法2-openlayers.orgを使用し、gpx/kmlファイルなどを使用してエリアを定義します。これは非常に見栄えがよく、ズームやパンを行ったり、きれいなHTMLポップアップなど、あらゆる種類の凝ったことを実行したりできますが、JavaScriptを含むはるかに多くの作業が必要です。
htmlタグを使用して画像をマッピングし、特定の各状態領域を、状態の輪郭を補間するための一連のポイントを持つポリゴン形状として定義できます。それは大変な努力の考えでしょう。