0

私はデスクロケーションマッピングソリューションに取り組んでいます。

目標は、ワークステーションの状態を示すために操作できるフロア プランのセット位置にイメージを表示することです。

現時点では、フロア プランをマッピングするプロセスは非常に長く、面倒です。

  1. PDFから取得したマップがあります。
  2. ポッド コンピューターの周囲に長方形 / 正方形の DIV を配置する
  3. ポッド div の位置を絶対に設定し、WIDTH、HEIGHT、TOP:#px、LEFT:#px を設定して所定の位置に移動します。
  4. pod DIV 内に 20px x 20px の DIV をいくつか配置します。
  5. ワークステーションの各 div 位置を絶対位置に設定し、WIDTH、HEIGHT、TOP:#px、LEFT:#px を設定して所定の位置に移動します。
  6. 各デスク DIV にイメージを配置します (これらのイメージ ソースは、データベース内のそのワークステーションのステータスに応じて、PHP によって動的に書き込まれます)。

これを行うためのより良い方法についてアドバイスしていただけますか？

これを実行してコードをエクスポートするのに役立つプログラムはありますか? 私はこれについて完全に間違った方法で行っていますか?

ベクトル画像を取得してグラフィック プログラムでマッピングし、それを Web サイトに移動する方法があると聞きました。

ここに画像の説明を入力

CSS:

/*MAP POSITION*/
#map {height: 521px; width: 900px;  position: relative;}

/*POD POSITION*/
#deskGroup01-01{width:235px; height:120px;  position: absolute; left:8.5em; top: 4.5em;         }

/*WKS POSITIONS*/
#dg1Wks01-001{width:20px; height:20px;  position: absolute;left:1em;  top: 1.5em;}
#dg1Wks01-002{width:20px; height:20px;  position: absolute;left:4.5em; top: 6em;}
#dg1Wks01-003{width:20px; height:20px;  position: absolute;left:7.5em; top: 7.6em;}
#dg1Wks01-004{width:20px; height:20px;  position: absolute;left:14em; top: 7.5em;}
#dg1Wks01-005{width:20px; height:20px;  position: absolute;left:17em; top: 6em;}
#dg1Wks01-006{width:20px; height:20px;  position: absolute;left:19.9em; top: 1.4em;}
#dg1Wks01-007{width:20px; height:20px;  position: absolute;left:13.6em; top: 1.2em;}
#dg1Wks01-008{width:20px; height:20px;  position: absolute;left:10.5em; top: 2.5em;}
#dg1Wks01-009{width:20px; height:20px;  position: absolute;left:7.8em; top: 1.2em;}

HTML:

<div id="map">
<img src="images/imagemap.png" border="0" width="900" height="520" usemap="map" />
 <!-- Desk Grouping 1 -->
     <div id="deskGroup01-01">
           <div id="dg2Wks01-001">
        <img  id="01-001" class="trigger" src="<?php select_icon($deskno, $location); ?>" alt="01-001" title="01-001">
       </div>
      </div><!-- end Desk Grouping 1 -->
</div><!-- end lvlmap -->
4

1 に答える 1

0

アイコンを使用せず、代わりにカラーハイライト付きの画像マッピングを使用するのが最善の方法であると判断しました。

マップライトが非常に役立つことがわかりました http://davidlynch.org/projects/maphilight/docs/

Coordinaite マッピングには、Dream Weaver デザイン ビューにあるプロット ツールを使用しています。

これは、マップ上にアイコンを表示できるほど理想的ではありませんが、柔軟性が大幅に向上し、マップがはるかに簡単になります。

誰かがより強力なアプローチを持っている場合は、コメントを追加してください。

于 2012-11-13T05:05:10.663 に答える