HTML/Javascript 在图像上显示数据答案

【问题标题】：HTML/Javascript show data on imageHTML/Javascript 在图像上显示数据
【发布时间】：2014-05-29 21:50:18
【问题描述】：

我想在图像上动态添加一些文本。

设置：

我想对我的网络进行动态布局并将其显示在网页中。在这个图像/布局上，我想把 IP 地址放在方案上。

使用的语言：

Ruby、Sinatra（Ruby 的网络框架）
HTML(5)
jQuery

是否有任何 API 或框架在网站上提供此功能？

【问题讨论】：

我建议通过 css 在带有 ip 的图像上放置一个图层。所以你不必修改图像。此外，ip 将是可复制的
你试过的代码是？
@JayBlanchard 我没有代码，因为我不知道那里甚至有一个框架（我搜索过，但没有好的结果）。因此问题。

标签： javascript jquery html ruby layout

【解决方案1】：

html:

<div class="network_box">
    <img src="network.jpg">
    <span class="text_data" id="ip_1">
        0.0.0.0:3000
    </span>
    <span class="text_data" id="ip_2">
        0.0.0.0:4000
    </span>
    <span class="text_data" id="ip_3">
        0.0.0.0:3000
    </span>
    <span class="text_data" id="ip_4">
        0.0.0.0:3000
    </span>
</div>

css:

.network_box{
width: 700px;
height: 400px;
position: relative; 
}
.network_box img {
width: 700px;
height: 400px;
position: absolute;
top: 0;
left: 0;
z-index: 10
}

.network_box .text_data{
position: absolute;
z-index: 20 
}

#ip_1{
top: 10px;
left: 15px  
}

#ip_2{
top: 50px;
left: 155px 
}

只需使用 ID 设置正确的位置（从块的左上角开始）

【讨论】：

这是一个很好的解决方案，可以将 IP 地址放在图像上。我已经研究了制定方案本身的可能性，并且发现了一些图表生成器可能可以解决问题。如果我会尝试结合你的 CSS 解决方案（通过 JQuery），看看我能不能到达某个地方:) Thx！
np) 你也可以通过 html "data" 属性直接设置元素位置。然后只需循环抛出所有带有 .text_data 类的元素即可获取该属性并根据样式进行设置。例如`
123.12.124
`。通过 jquery: $('.text_data').data('left');