Setting background image using javascript without hard-coding

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?

Aks Jacoves · Accepted Answer · 2020-05-27 06:06:07Z

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

edited May 27, 2020 at 6:06

answered May 27, 2020 at 4:26

Aks Jacoves

8777 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Saumya Chauhan Over a year ago

Want to set the images as background for div section with id 'message'. This code is appending the image.

Aks Jacoves Over a year ago

In my example I made the div.#message receive the width and height of the image just for demonstration, but if you already have the div. # Message with a height and width pre-defined by css, just delete the following lines: message .style.width = this.width + 'px' and message.style.height = this.height + 'px'

Saumya Chauhan Over a year ago

Is there any method without using jquery?

Aks Jacoves Over a year ago

The way I did it I didn't use jquery, this is javascript. Having trouble implementing the code?

Collectives™ on Stack Overflow

Setting background image using javascript without hard-coding

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related