Choose an image to display as the background image within a div

Question

Choose an image to display as the background image within a div

I'm developing an online poster creator and I could use some guidance on how to set an image as the background of a div element. I'm a bit lost on where to begin.

Currently, I have a div containing a selection of images and an empty div with just an ID.

This is my image selection div:

<div id="imgopt">
    <ol>
        <li>
            <img src="asset/img/template1.jpg">
        </li>
        <li>
            <img src="asset/img/template2.jpg">
        </li>
        <li>
            <img src="asset/img/template3.jpg">
        </li>
        <li>
            <img src="asset/img/template4.jpg">
        </li>
    </ol>
</div>

This is my Empty Div:

<div id="designPoster">

</div>

Essentially, I need help with writing the JavaScript code or getting some guidance on how to make it possible to set the background image of the empty div[id="designPoster"] by selecting an image from the div[id="imgopt"].

javascript jquery html css jquery-ui

Answer 1

Answer №1

To achieve this using plain JavaScript instead of jQuery, follow these steps below. Please note that the image has been updated to show a functional demo.

var imageElements = document.querySelectorAll("#imgopt img");
var posterElement = document.querySelector("#designPoster");

for (var i = 0; i < imageElements.length; i++) {
  imageElements[i].addEventListener("click", changeBackgroundImage);
}

function changeBackgroundImage(e) {
  posterElement.style.backgroundImage = "url(" + e.target.src + ")";
  posterElement.style.backgroundSize = "contain";
  posterElement.style.backgroundRepeat = "no-repeat";
}

#imgopt img {
cursor: pointer;
width: 100px;
height: auto;
}

#designPoster {
width: 400px;
height: 157px;
background: #ccc;
}

<div id="imgopt">
  <ol>
    <li>
      <img  src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1">
    </li> 
    <li>
      <img  src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1">
    </li>
    <li>
      <img  src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1">
    </li>
    <li>
     <img  src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1">
   </li>
  </ol>
</div>;

<div id="designPoster"></div>

Best wishes for your coding endeavors!

Answer 2

To achieve this using plain JavaScript instead of jQuery, follow these steps below. Please note that the image has been updated to show a functional demo.

var imageElements = document.querySelectorAll("#imgopt img");
var posterElement = document.querySelector("#designPoster");

for (var i = 0; i < imageElements.length; i++) {
  imageElements[i].addEventListener("click", changeBackgroundImage);
}

function changeBackgroundImage(e) {
  posterElement.style.backgroundImage = "url(" + e.target.src + ")";
  posterElement.style.backgroundSize = "contain";
  posterElement.style.backgroundRepeat = "no-repeat";
}

#imgopt img {
cursor: pointer;
width: 100px;
height: auto;
}

#designPoster {
width: 400px;
height: 157px;
background: #ccc;
}

<div id="imgopt">
  <ol>
    <li>
      <img  src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1">
    </li> 
    <li>
      <img  src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1">
    </li>
    <li>
      <img  src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1">
    </li>
    <li>
     <img  src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1">
   </li>
  </ol>
</div>;

<div id="designPoster"></div>

Best wishes for your coding endeavors!

Answer 3

Answer №2

Here is the solution to your inquiry:

$(function() {

   $('#imgopt img').on('click', function() {
     var imageSource = $(this).prop('src');
     $('#designPoster').css('background-image', 'url('+imageSource+')');  
     
   });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imgopt">
  <ol>
    <li>
      <img  src="asset/img/template1.jpg">
    </li> 
    <li>
      <img  src="asset/img/template2.jpg">
    </li>
    <li>
      <img  src="asset/img/template3.jpg">
    </li>
    <li>
     <img  src="asset/img/template4.jpg">
   </li>
  </ol>
</div>

<div id="designPoster">

</div>

Answer 4

Here is the solution to your inquiry:

$(function() {

   $('#imgopt img').on('click', function() {
     var imageSource = $(this).prop('src');
     $('#designPoster').css('background-image', 'url('+imageSource+')');  
     
   });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imgopt">
  <ol>
    <li>
      <img  src="asset/img/template1.jpg">
    </li> 
    <li>
      <img  src="asset/img/template2.jpg">
    </li>
    <li>
      <img  src="asset/img/template3.jpg">
    </li>
    <li>
     <img  src="asset/img/template4.jpg">
   </li>
  </ol>
</div>

<div id="designPoster">

</div>

Answer 5

Answer №3

To set the background as the img src, you can use the following code:

$('#imgpot img').click(function(){
    $('#designPoster').css('background-image', `url(${this.attr('src')})`);
});

This code adds an event handler to each image tag within #imgpot. When clicked, it sets the background-image of #designPoster to the src attribute of the clicked image.

Answer 6

To set the background as the img src, you can use the following code:

$('#imgpot img').click(function(){
    $('#designPoster').css('background-image', `url(${this.attr('src')})`);
});

This code adds an event handler to each image tag within #imgpot. When clicked, it sets the background-image of #designPoster to the src attribute of the clicked image.

Choose an image to display as the background image within a div

Answer №1

Answer №2

Answer №3

Similar questions

Utilizing object UUID keys to associate products in VueJS

The background image fails to load in ReactJS application

Changing an object received as a prop in Vue.js

Having trouble manipulating a web element within an expand grid while using the selenium web driver

Begin the React counter with a starting value of two

Move a div by dragging and dropping it into another div

The submit button remains unresponsive, yet upon removing its JavaScript code, it functions smoothly

Show the current server time from ASP.NET in four distinct time zones using JScript

Converting HTML Javascript to JAVA with the help of Selenium

Top method for inverting the sequence of list elements

Leverage the power of HTML5 localstorage in order to maintain the toggle state of jQuery even

Safari displays text in a noticeably bigger font size compared to other browsers

What is causing the error "Expected an assignment or function call and instead saw an expression" to occur in this situation?

The function app.post in Express Node is not recognized

Having trouble with OBJ model loading in Three.JS

Incorporated video content directly onto my website

In Vue.js, it is not possible to modify a component variable within a callback function

Tips for dividing a single row retrieved from a MySQL database that has been converted with json_encode so that it can be shown in

Display a string of text containing multiple interactive links

Utilizing RxJS finalize in Angular to control the frequency of user clicks