在图像上映射位置答案

【问题标题】：Mapping Locations on an image在图像上映射位置
【发布时间】：2012-11-13 13:05:10
【问题描述】：

我正在研究办公桌位置映射解决方案。

目的是在平面图上的设定位置上生成图像，我可以对其进行操作以显示工作站状态。

目前，我绘制平面图的过程非常漫长而整洁。

我有一张从 PDF 中截取的地图。
在 Pod 计算机周围放置一个矩形/方形 DIV
将 pod div 位置设置为绝对位置并通过以下设置移动到位：WIDTH、HEIGHT、TOP:#px、LEFT:#px。
在 pod DIV 中放置几个 20px x 20px DIV
通过设置将每个工作站 div 位置设置为绝对位置并移动到位：宽度、高度、顶部：#px、左侧：#px。
在每个桌面DIV中放一张图片（这些图片源是PHP根据数据库中那个工作站的状态动态写入的）

你们能建议更好的方法吗？

是否有程序可以帮助我执行此操作并导出代码？我是否以完全错误的方式处理这个问题？

我听说一种方法是获取矢量图像并将其映射到图形程序中，然后将其移动到网站中？

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

【问题讨论】：

标签： css xhtml mapping

【解决方案1】：

我决定最好的方法是不使用图标，而是使用带有颜色突出显示的图像映射。

我发现地图灯很有帮助 http://davidlynch.org/projects/maphilight/docs/

对于 Coordinaite 映射，我使用的是 Dream Weaver 设计视图中的绘图工具。

这不如在地图上显示图标那么理想，但提供了更多的灵活性并且更容易映射。

如果有人有更强大的方法，请添加评论。

【讨论】：