HTML/Javascript show data on image

Question

I want to put some text on an image dynamically.

Setup:

• I want to make a dynamic layout of my network and show it in a webpage. On this image / layout, I want to put the IP addresses on the scheme.

Languages used:

• Ruby, Sinatra (webframework for ruby)
• HTML(5)
• JQuery

Are there any API's or frameworks providing this functionality on a website?

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 
}

just use use ID to set correct position(from left top corner of block)