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來設置正確的位置（從塊的左上角）