アップデート：
こんにちはみんな、これは私が得た距離です：http://jsfiddle.net/vsJMn/（「RaphaelJS australia」の例でテストしています）
私が今理解できない唯一の問題は、別の要素がクリックされたときに要素の状態を 0 に戻す方法です。要素をクリックしたときに「アクティブ/選択済み」状態を取得する方法を考え出しました。ホバーは残りの部分で機能しますが、クリックされた要素は最後の状態でスタックし、ホバーイベントは機能しませんもう取り組まないでください。
これを修正する方法を知っている人はいますか？
古い質問:
これに非常によく似たものを作成したい: http://www.voanews.com/content/olympic-village-map/1446501.html
クリックすると、それぞれがページに異なるテキストを表示するカスタム形状を描画できるようにしたいと考えています (おそらく「div」内)。
そして、リンクの例と同じように、マウスオーバー、クリックなどでインタラクティブなスタイルを追加したいと思います。図形にカーソルを合わせるとアニメーションが表示され、クリックすると選択されたままになり、ホバーアニメーションが別の図形をクリックするまで、他の図形をクリックします。また、テキストのフェード効果。
HTML5 キャンバス、Raphaeljs ( http://raphaeljs.com/australia.html )、およびその他のいくつかの作成方法を検討してきましたが、うまくいかないようです。
あの「オリンピック選手村」はまさに私が必要としているものです。誰か助けてください。
@vlad-otrocol に感謝します。あなたが提案したチュートリアルを調べましたが、とても役に立ちました。必要なものはたくさんありますが、欲しいものはすべて見つかりませんでした。
あなたの例について @kevin-nielsen に感謝します。あなたの方法は、私が RaphaelJS の例の Web サイトで取り組んできた「オーストラリア」の例よりもはるかに簡単です。これは私が得た距離です: http://jsfiddle.net/k2GQj/。
私の例をあなたの例と統合し、これを持っています: http://jsfiddle.net/L3bHz/。
私がする必要があるのは、要素をクリックして色を変更し、その色の状態を維持しながら、ホバー時に他の要素の色を変更できるようにすることです (「オリンピック ビレッジ マップ」など)。
私の例からわかるように、現時点では、各要素の色を 1 つの色に変更する「mouseout」イベントがあります。各要素に対して「mouseout」イベントを作成する必要がありますか?ホバー後に要素の色を元の状態に戻す方法はありませんか?
また、ケビン、あなたの例では、テキストをどのように配置しますか? 私が取り組んでいる例では、DIV が使用されているため、CSS で配置を変更できます。
助けてくれてありがとう - 私はこれにもっと取り組み、進歩を報告します!