Выберите изображение для отображения в div как bg-img

Question

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

Я создал div с парой изображений для выбора и пустой div с просто id div.

Вот мои изображения 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>

вот мой Пустой Div:

<div id="designPoster">

</div>

Basic Мне нужна помощь в написании кода JS или немного указания о том, как реализовать эту функцию установки фонового изображения пустого div[id="designPoster"] просто выбрав изображение из div[id="imgopt"].

Answer 1

Это будет делать то, что вы просите ...

$(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 2

Если вы хотите сделать это с Javascript без jQuery, вот как вы можете это сделать.Обратите внимание, что я изменил изображение, чтобы иметь рабочий пример.

var imageElts = document.querySelectorAll("#imgopt img");
var posterElt = document.querySelector("#designPoster");

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

function changeBgImage(e) {
  posterElt.style.backgroundImage = "url(" + e.target.src + ")";
  posterElt.style.backgroundSize = "contain";
  posterElt.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>

Удачи!

Answer 3

Предполагая, что img src - это фон, который вы хотите установить:

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

Что это сделает, это добавит обработчик событий к каждому тегу изображения в #imgpot, при нажатии которого он будетприсвойте background-image свойство #designPoster атрибуту src, по которому щелкнули изображения.