HTML/Javascript在图像上显示数据

Question

我想动态地在图像上放置一些文本。

设置：

• 我想让我的网络的动态布局，并显示在网页上。在这个图像/布局上，我想把IP地址放在方案上。

语言使用：

• 红宝石，辛纳屈（webframework红宝石）
• HTML（5）
• JQuery的

是否有任何的API或提供有关这个功能框架一个网站？

Answer 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来设置正确的位置（从块的左上角）