Замена backgroundImage в CSS через Javascript

@Rickie · Регистрация: 19.07.2016

Author24 — интернет-сервис помощи студентам

Прошу помочь, не могу разобраться

Задача: при клике на блоки preview1, preview2, preview3 (background-image прописан в CSS), передавать путь картинки в mainview-image (картинка в HTML разметке) и соответственно менять саму картинку

Замена backgroundImage в CSS через Javascript

HTML5

     <div class="preview-box">
        <div id="preview1" onclick="change_preview1()">
        </div>
 
        <div id="preview2" onclick="change_preview2()">
        </div>
 
        <div id="preview3" onclick="change_preview3()">
        </a>
     </div>
 
     <div id="mainview">
        <img src="images/red.jpg" alt="image" id="mainview-image">
     </div>

CSS

#preview1 {
    background-image: url("images/red.jpg");
}
 
#preview2 {
    background-image: url("images/blue.jpg");
}
 
#preview3 {
    background-image: url("images/green.jpg");
}
 
#mainview {
    width: 200px;
    height: 300px;
}

Javascript

function change_preview1 () { 
   /* Получаю url картинки из CSS preview1 */
   var element = document.getElementById('preview1').style.backgroundImage; 
   /* Смотрю передался ли путь в переменную */
   alert(element); 
   var mainview-image = document.getElementById('mainview-image'); 
   /* Подставляю полученный url из preview1 в путь картинки mainview-image */
   mainview-image.src = element;                                                  
}
 
... Повторяем код для 2 и 3 картинки

Написал - не работает, начал искать и возникли вопросы:
1) Почему alert не выдает путь?
2) Можно ли избежать дублирования кода для 2 и 3 картинки? Как дать понять скрипту откуда был клик?

@Rickie · 27.07.2016, 09:41 **[ТС]**

Так как путь картинок известен и его можно не получать из свойств CSS,
а сразу прописать вручную, попробовал сделать вот так:

HTML5

<div id="preview1" onclick="document.getElementById('mainview-image').src='images/red.jpg'">
</div>
<div id="preview2" onclick="document.getElementById('mainview-image').src='images/blue.jpg'">
</div>
<div id="preview3" onclick="document.getElementById('mainview-image').src='images/green.jpg'">
</div>

Вроде заработало, но большая картинка mainview-image меняется только на долю секунды и потом обратно возвращает картинку по умолчанию...

Прощу помощи

@mrtoxas · 27.07.2016, 13:18

CSS

.preview {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  display: inline-block;
  font-size: 32px;    
}

HTML5

1
2
3

<div class="preview" onclick="changeBack(this, 'green')"></div>
<div class="preview" onclick="changeBack(this, 'red')"></div>
<div class="preview" onclick="changeBack(this, 'blue')"></div>

Javascript

function changeBack(div, color) {
  switch (color) {
    case 'green':
      color = 'images/green.jpg';
      break
    case 'red':
      color = 'images/red.jpg';
      break
    case 'blue':
      color = 'images/blue.jpg';
      break
  }
div.style.backgroundImage = 'url(' + color + ')';
}

Результат

	27.07.2016, 13:18