HTML / Javascript показать данные на изображении

Question

HTML / Javascript показать данные на изображении

0

Я хочу добавить текст в изображение динамически.

Настроить:

Я хочу создать динамический макет моей сети и показать его на веб-странице. На этом изображении/макете я хочу поместить IP-адреса в схему.

Используемые языки:

Ruby, Sinatra (webframework для ruby)
HTML (5)
JQuery

Существуют ли какие-либо API или фреймворки, предоставляющие эту функциональность на веб-сайте?

Bulki 15 апр. 2014, в 15:59

Источник

0

Я бы рекомендовал поместить слой поверх изображения с ip в нем через css. Таким образом, вам не нужно модифицировать изображение. Кроме того, ip будет копируемым
Fuzzyma 15 апр. 2014, в 13:44
0

И код, который вы пробовали это?
Jay Blanchard 15 апр. 2014, в 13:44
0

@JayBlanchard У меня нет кода, потому что я понятия не имею, что там есть даже фреймворк (я выполнил поиск, но безрезультатно). Отсюда и вопрос.
Bulki 17 апр. 2014, в 06:23

Показать ещё 1 комментарий

Теги:

javascript

jquery

html

ruby

layout

1 ответ

Ещё вопросы

Я бы рекомендовал поместить слой поверх изображения с ip в нем через css. Таким образом, вам не нужно модифицировать изображение. Кроме того, ip будет копируемым
@JayBlanchard У меня нет кода, потому что я понятия не имею, что там есть даже фреймворк (я выполнил поиск, но безрезультатно). Отсюда и вопрос.

kpblc · Answer 1 · 2014-04-15T11-08-00.000Z

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 
}

просто используйте идентификатор использования, чтобы установить правильное положение (из левого верхнего угла блока)

Это хорошее решение для размещения IP-адресов на изображении. Я посмотрел на возможности сделать саму схему и нашел несколько генераторов диаграмм, которые, возможно, справятся с задачей. Если я попытаюсь объединить ваше CSS-решение (через JQuery) и посмотреть, смогу ли я где-нибудь это найти :) Спасибо!
np) также вы можете установить положение элемента напрямую через html-атрибут data. затем просто закинуть все элементы с классом .text_data, взять эти атрибуты и установить в соответствии со стилем. пример `<div class =" text_data "data-top =" 100 "data-left =" 123 "> 123.12.124 </ div>`. через jquery: $ ('. text_data'). data ('left');