映射圖像上的位置

我正在使用桌面位置映射解決方案。映射圖像上的位置

目的是在平面圖上的設置位置上顯示圖像，以便我可以控制顯示工作站狀態。

目前，我制定平面圖的過程非常漫長。

我有一個地圖，我從一個PDF採取。
在pod計算機周圍放置一個矩形/正方形DIV
將pod div的位置設置爲絕對值，並通過設置：WIDTH，HEIGHT，TOP：#px，LEFT：#px移動到位。
將幾個20px乘20px DIV放在吊艙內DIV
將每個工作站的div位置設置爲絕對值，並通過設置：WIDTH，HEIGHT，TOP：#px，LEFT：#px來移動到位。
將圖像中的每個（取決於工作站在數據庫中的狀態，這些圖像源動態由PHP寫的）

你們可以請告知到這樣做的更好的方法辦公桌DIV的的？

有沒有一個程序可以幫助我做到這一點，並導出代碼？我是否完全用錯誤的方式解決這個問題？

我聽說有一種方法是採用矢量圖像並將其映射到圖形程序中，然後將其移入網站中？

enter image description here

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 -->

來源

2012-11-13 Samuel Meddows