我正在研究办公 table 位置映射解决方案。
目的是在平面图上的固定位置上有一个图像,我可以操纵它来显示工作站状态。
目前,我绘制平面图的过程非常冗长和整洁。
- 我有一张从 PDF 中提取的 map 。
- 在 pod 计算机周围放置一个矩形/正方形 DIV
- 将 pod div 位置设置为绝对位置,并通过以下设置移动到位:WIDTH、HEIGHT、TOP:#px、LEFT:#px。
- 在 pod DIV 中放置几个 20px x 20px DIV
- 将每个工作站 div 位置设置为绝对位置,并通过以下设置移动到位:WIDTH、HEIGHT、TOP:#px、LEFT:#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 -->
最佳答案
我认为最好的方法是不使用图标,而是使用带有颜色突出显示的图像映射。
我发现 map 灯非常有用 http://davidlynch.org/projects/maphilight/docs/
对于 Coordinaite 映射,我使用 Dream Weaver 设计 View 中的绘图工具。
这不像能够在 map 上显示图标那样理想,但提供了更多的灵 active 并且更容易绘制 map 。
如果有人有任何更强大的方法,请添加评论。
关于css - 在图像上映射位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13354193/