Установка фонового изображения с использованием javascript без жесткого кодирования

Question

Здесь я пытался отобразить эти изображения в качестве фонового изображения при наведении курсора мыши для раздела div с идентификатором 'message' путем жесткого кодирования с использованием функции javascript для каждого изображения следующим образом.

HTML код внутри раздела тела

<div id = "message">
    Hover over an image to display the
         alt text.
</div>

<img class = "preview"
     alt = "Styling with a Bandana"
     src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg"
     onmouseover = "showProperties(this);show1()"
     onmouseleave = "document.getElementById('message').innerHTML='Hover over an image'; show()">

<img class = "preview"
     alt = "With My Boy"
     src = "https://s3-us-west 2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG"
     onmouseover = "showProperties(this);show2()"
     onmouseleave =  "document.getElementById('message').innerHTML='Hover over an image';show()">

<img class = "preview"
      src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg”
      alt = "Young Puppy"
      onmouseover = "showProperties(this);show3()"
      onmouseleave = "document.getElementById('message').innerHTML='Hover over an image';show()">

Javascript функция для установки фонового изображения:

function show1()
{ 
  document.getElementById('message').style.backgroundImage = "url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg')"
}

Есть ли способ изменить его с помощью атрибута sr c с помощью javascript без жесткого -кодирование URL-адреса и его динамическое изменение?

Answer 1

Посмотрите, хотите ли вы этого:

let previews = document.querySelectorAll('.preview') // get all div.preview


for(let preview of previews) { // Creates the mouseover event for all div.preview
  preview.addEventListener('mouseover', function(e) { 
    let message = document.querySelector('#message')
    message.style.background = `url(${this.src})`
    message.style.width = this.width + 'px'
    message.style.height = this.height + 'px'
    message.style.backgroundSize = 'contain'
    message.style.backgroundRepeat = 'no-repeat'
    
  })
}

<div id="message">
   Image here
</div>

<img class="preview" width="200" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg">

<img class="preview" width="200" src="https://s3-us-west 2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG">

<img class="preview" width="200" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg">

Отредактировано