画像があります (画像は建物の平面図です)。画像には、オープンまたは予約可能なさまざまな部屋が含まれています。イメージマップとホットスポットを使用して部屋の座標をマッピングし、onclick イベントを処理して、必要なことを実行しています。問題は、部屋が予約されたら、ホットスポットの座標にどのように色を付けることができるかということです。私は自分のデータベースで予約済みの部屋を追跡しているので、どの部屋が予約されているかを知ることは問題ではありませんが、問題はホットスポットの色のプロパティがないことです。これについて最善の方法は何ですか？ジャバスクリプト？
クリックするだけで画像を交換できることはわかっていますが、何百もの部屋があり、予約済みの部屋と予約されていない部屋のすべての可能性に対して多くの画像を用意するのは時間の無駄です。
あなたはjQueryとは言いませんが、最初から始めるよりは確かに簡単です。これを行うためのjQueryプラグイン：
http://www.outsharked.com/imagemapster/
データベースへのアクセスの問題は、ちょっと厄介です。ページが読み込まれるときに、サーバーがマークアップの一部として必要なデータを渡せない理由はありません。
<script type="application/json" id="map-data">
[1,2,10,33]
</script>
..またはあなたにとって有用なフォーマット/構造/データ型。ブロックを使用する必要はありませんscript- 非表示に入れることができますがdiv、実際には問題ではありません。JSON を使用する必要もありません。これは単に便利です。次に、そのデータを ImageMapster などへの入力として使用して、必要な領域を強調表示できます。構成が完了するまでイメージを非表示にします。エンド ユーザーが見る限り、イメージはサーバーからロードされた方法です。
マークアップからいくつかのデータを取得し、それを使用して ImageMapster を使用してイメージマップにホットスポットを設定する例:
HTML5 にはキャンバス経由の手続き型描画があります