html - CSS を使用してデータをドリルダウンするグラフィカル マップ

Question

クライアントが大規模な集合住宅である新しいプロジェクトがあります。地区ごとに 10 のエリア (地区 1、地区 2 など) があり、クライアントは地図を提供しています。

各地区には 3 ～ 4 棟の住宅があり、各棟には集合住宅があります。各マンションには、賃貸用の部屋があります。

クライアントは、各レベル (エリア全体、各地区、各建物、各アパート、各部屋) のグラフィカル マップを必要としています。

地図には完全な形はありません。 データベースが完成し、表形式のデータのドリルダウンが機能しています。各レベル マップの PNG を探しており、マップの特定の領域に、緑 (利用可能な部屋)、赤 (使用中) などを示す DIV をオーバーレイするようなものを用意したいと考えています... または 150 – 利用可能、235 – 利用可能.

ユーザーは各マップ領域をクリックし、他のマップにドリルダウンして詳細を取得できます。HTML を動的に生成するためのフィールドを含むテーブルの作成について説明しました。

<map name="mapDistrict"> <area shape="circle" coords="90,58,3" href=" Building/1" alt=" Building 1"> <area shape=" poly" coords="124,58,8" href=" Building/2" alt=" Building 2"> </map>

より良い解決策はありますか？CSS、Javascript (JQUERY) を使用したい.. FLASH なし!

Answer 1

私はこのタイプの不動産マップを何度も作成しました。あなたがしていることはかなり効果的です。おそらく、JS 配列または JSON を使用して、単位を座標にマッピングし、それぞれのステータスを作成する必要があります。

建物全体については、これを見たいと思うかもしれません: http://www.netzgesta.de/mapper/、これは地図領域を色付きのオーバーレイに変換します。

四角形の配置されたリンクを単純に使用することを考慮したい場合がある他のアプローチがいくつかあります。

イベントをエリア マップに接続してオーバーレイを表示することもできます。

<area COORDS="80,88,120,125" HREF="#" onMouseOver="showUnit('a')">