HTML / Javascript在圖像上顯示數據

Question

我想動態地在圖像上放置一些文本。

設定：

• 我想對網絡進行動態布局並將其顯示在網頁中。 在此圖像/布局上，我想將IP地址放入方案中。

使用的語言：

• Ruby，Sinatra（紅寶石的網絡框架）
• 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來設置正確的位置（從塊的左上角開始）