2012-07-18 6 views
5

私はイメージを持っています(イメージは建物のフロアプランです)。イメージには、開いているか予約していることができるさまざまな部屋があります。私はImagemapとホットスポットを使って部屋の座標を描きました。そして、私が達成するために必要なものを行うためにonclickイベントを処理しています。問題は、いったん部屋が予約されたら、ホットスポットの座標をどのように色付けできますか?私は自分のデータベースの予約された部屋を追跡しているので、予約されている部屋を知ることは問題ではありませんが、問題はホットスポットのカラープロパティがないことです。これについてはどうすればいいですか? Javascript?イメージマップ上でaspホットスポットを着色する方法は?

クリック数などで画像を入れ替えることはできますが、何百もの部屋があり、予約されている部屋と予約されていない部屋の可能性について、その数多くの画像があるのは時間の無駄でしょう。

答えて

0

HTML5あなたはjQueryのを言っていないが、それは確かゼロから始めるよりも容易になるだろうcanvas

+0

グレート答えが、私がする必要がある場合、私は、描画の問題を持っていません。それはクライアント側ではないサーバー側からですか?私は自分のデータベースにアクセスできる必要があります。したがって、pageloadでは、予約されている部屋を色づけします。 –

+0

ああ、次にgdi +を使って行こう。私の前にもう誰もそれに遭遇しなければ朝に例を掲示します –

2

経由手続きの図面を持っています。

http://www.outsharked.com/imagemapster/

あなたのデータベースアクセスの問題が赤いニシンのビットです:これを行うためのjQueryプラグイン。ページがロードされたときにマークアップの一部として必要なデータをサーバーが渡すことができない理由はありません。

<script type="application/json" id="map-data"> 
    [1,2,10,33] 
</script> 

..または任意の書式/構造体/データ型が役立ちます。 scriptブロックを使用する必要はありません。隠されたdivに入れることができます。実際には関係ありません。 JSONを使用する必要もありません。これは単なる便利です。次に、そのデータをImageMapsterのようなものへの入力として使用して、必要な領域を強調表示することができます。設定が完了するまで画像を隠すだけで、エンドユーザが見る限り、サーバからどのようにロードされたかが分かります。

マークアップからいくつかのデータを取って、そしてImageMapsterを使用してイメージマップ上のホットスポットを設定するためにそれを使用しての例:

http://jsfiddle.net/jamietre/hD6bM/

+0

これは私のデータベースにアクセスしてページの読み込み時に部屋の色を変えなければならないという同じ問題になると思います。 –

+0

確かにそれをサーバー側で行う方法はありますが、実際に画像を描画するにはGDI +などを使用して大量の作業が必要になるでしょう。エンドユーザーは、ページにアクセスするたびに完全に新しいイメージをダウンロードする必要があります。そのイメージからは大きなイメージが得られます。あなたはある問題を別の問題と交換します。 Javascriptは近ごろかなり高速ですが、クライアントでこれを行うパフォーマンスの問題を予期する理由はありません。データベースに特別なリクエストをする必要はありません。ページのロード時にJSONとしてデータを渡し、クライアントがそれを使用してレンダリングを実行させるだけです。 –

+0

私の答えは、サーバーから渡されたデータをどのように使用できるかの例で更新されました。 –

関連する問題