我正在开展一个项目，为办公室创建一个互动平面图。我有一个建筑平面图的jpg图形。我们的想法是创建一个搜索栏，您可以在其中搜索员工，他们的办公室将在此图形上突出显示。
我最初的计划是使用地图标记并在每个办公室的坐标中绘图。我会使用jQuery来解析搜索值并将其链接到每个办公室坐标。但是，我了解到你无法在map标签中添加样式，这使得这种样式变得不可行。我尝试了一些其他解决方案，例如将图像转换为.svg并使用svg标记。这似乎不起作用，因为svg标签似乎是用于在文档中动态创建图形。
有人能指出我这个项目的正确方向吗？我一直回到原点，不知道从哪里开始。
答案 0 :(得分：0)
您可以在相对定位的容器中指定div上的绝对位置（以指示平面图上的人员位置）。
然后，您可以放置内部div的数据属性来计算位置。
<div style="position:relative;background:url(floorplan.jpg)">
<div style="position:absolute;top:50%;left:25%" data-person="Liam"></div>
</div>
这确实涉及将这些部分分成他们自己的html标签，而不是＆＃34;嵌入＆＃34;在图像中。
旧版浏览器也不支持SVG
然后，您应该根据数据属性访问div，并在DOM中修改它。
然后你也可以使用onmouseover（这不会对触摸设备起作用）来激活样式更改。