使用 javascript 设置背景图片，无需硬编码

Question

Here I was trying to display these images as a background image on mouseover event for div section with id 'message' by hard-coding using javascript function for each image as follows.

HTML code inside body section

<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 for setting background image:

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

Is there any way to change it using src attribute using javascript without hard-coding the url and change it dynamically?

Answer 1

See if this is what you want:

 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">

Edited