Блог

У меня есть несколько объектов, подобных приведенным ниже. Я хочу отображать для каждого элемента изображение, специфичное для его типа, и при наведении курсора мыши на него должно отображаться его имя и dmg, например. Эффект наведения курсора мыши должен быть таким же, как в facebook при наведении курсора мыши на профиль.

Как мне это сделать и как мне сохранить данные объекта в изображении? Могу ли я вообще сделать это с помощью vanila javascript? Если нет, то для чего мне использовать этот тип привязки данных?

 let item = {
  name: "itemName",
  type: "weapon",
  dmg: 4
}
  

Inventory.js pastebin

index.html

 <div class="inventory" id="inventory">
    <div class="active-items" id="active-items">
      <h3 class="inventory-h3">Active Items</h3>
    </div>
    <div class="bag-items" id="bag-items">
      <h3 class="inventory-h3">Bag</h3>
    </div>
</div>
  

Редактировать:
Когда кто-то берет элемент, пользовательский интерфейс инвентаризации обновляется и элемент добавляется, но я хочу, чтобы элемент содержал данные объекта. Я не знаю, как этого добиться.

 <img id="id" src="/src">
<div id="div_to_display_image_info"></div>


<script>
function(){
   let item = {
  name: "itemName",
  type: "weapon",
  dmg: 4
}
var img=document.getElementById('id')
 img.addEventListener('onmouseover', ()=>{
    document.getElementById("div_to_display_image_info").innerHTML = `dmg - ${item.dmg} name-${item.name}` 
})

}

</script>