динамически изменять изображение и поместить текст с помощью JavaScript/JQuery

Question

У меня есть изображение выше. Моя задача - динамически изменять значения, где отображаются L, A и B; Мне нужно удалить/скрыть L, A и B и заменить его с помощью численного значения. Я использовал фейерверки для создания фрагментов области, где расположены L, A и B, и экспортировал ее в виде файла HTML. Моя идея состояла в том, чтобы определить идентификаторы для всех трех срезов/областей, используя jquery, чтобы идентификаторы скрывали область, а затем отображали требуемое значение по существующей области. Я могу скрыть значения L, A и B, но я не могу отображать значение по тем определенным областям (каждый регион является таблицей). Я не знаю, делаю ли я круглый путь, так как я не веб-разработчик. Если есть более простые способы, я был бы рад узнать.

Answer 1

Хорошо, если каждый регион является ячейкой таблицы, поэтому вам нужно создать пустую ячейку в точках, которые вы хотите изменить, их объявить идентификатор для этой (ячейки) и использовать чистый JS или jquery (проще), чтобы изменить его содержимое. Нравится:

<td id="was_L"> 

... 

$("#was_L").val('15') 

.... 

Возможно, вам также необходимо установить размер этой ячейки, используя стиль, чтобы таблица выглядела отлично. Нравится:

<td id="was_L" style="width:100px; height:100px"> 

Answer 2

Вы не можете очень легко изменить изображение в javascript. Вы можете решить свою проблему, разделив изображение на несколько изображений, при этом все, кроме одного, будут прозрачно поверх базового изображения, а затем вы можете изменить/скрыть/показать верхние изображения, чтобы выполнить то, что вы хотите.

Возможно, лучше использовать прозрачные наложенные изображения PNG вместо замены отдельных срезов. И это намного более гибко, потому что базовое изображение должно присутствовать только в одном изображении, а остальные могут содержать только то, что они должны представлять.

Вы должны использовать абсолютное позиционирование внутри относительного контейнера для размещения наложенных изображений или наложенных текстовых объектов.

Например, это создаст фон с двумя накладными изображениями на одной накладной части текста:

<div id="container> 
    <img id="overlay1" src="xxx.png"> 
    <img id="overlay2" src="yyy.png"> 
    <div id="text1">Some Text</div> 
</div> 

А, то некоторые CSS, как это:

#container { 
    position: relative; 
    height: 400px; 
    width: 300px; 
    background-image: url(bbb.jpg); 
} 

#overlay1 { 
    position: absolute; 
    top: 20px; 
    left: 50px; 
    z-index: 1; 
} 

#overlay2 { 
    position: absolute; 
    top: 150px; 
    left: 150px; 
    z-index: 1; 
} 

#text1 { 
    position: absolute; 
    top: 300px; 
    left: 150px; 
    z-index: 2; 
} 

В, в любое время может затем просто скрыть или показать отдельные компоненты или изменить текст. Например, чтобы скрыть элемент текста, вы бы просто использовать:

$("#text1").hide(); 

Чтобы изменить текст, вы должны просто использовать:

$("#text1").html("Different Text");