Как изменить фон блока при клике на другие?

Question

[rkniazev]

Есть див с фоном, нужно при клики на другие дивы с картинками(миниатюрами) при клиуи на них-нужно менять фон у основного.
Помогите решить проблему, совсем нуб в JS

Answer 1

[Максим Чалов]

JQ, картинки / правила / стили можно по вкусу добавить: codepen.io/anon/pen/PqrNre

Answer 2

[Виталий Инчин ☢]

Без jQuery:

-•° Нажать для начала апокалипсиса °•-

Answer 3

[Дмитрий Ким]

<div id="main"></div>
<div class="pictures">
  <div class="picture" data-bg="pic1.jpg" style="background: url('pic1.jpg') 50% 50%"></div>
  <div class="picture" data-bg="pic2.jpg" style="background: url('pic2.jpg') 50% 50%"></div>
  <div class="picture" data-bg="pic3.jpg" style="background: url('pic3.jpg') 50% 50%"></div>
</div>

$(function(){
  $(document).on('click', '.picture', function(){
    var bg = $(this).data('bg');
    $('.main').css('background', 'url("'+ bg +'") 50% 50% scroll no-repeat transparent');
  });
});