JavaScript: backgroundImage не меняется с onMouseOver

Question

Я довольно плохо знаком с JavaScript и пытаюсь что-то выяснить. У меня есть серия изображений в таблице, и я хотел бы, чтобы каждое изображение отображалось в элементе div, когда вы наводите курсор на него. Проблема в том, что код, похоже, ничего не делает. Я наведите курсор на элемент div, и в элемент #bigdisplay не вносятся никакие изменения. Если я заменю backgroundImage на свойство, такое как цвет, оно будет работать совершенно нормально. Что я делаю неправильно? Это код для моего элемента div.

<div id="image1" onmouseover="document.getElementById('bigdisplay').style.backgroundImage='url('images/Slideshow1.png')';">
/* ... */
</div>

Если я должен предоставить какой-либо другой код с моего сайта, я это сделаю (хотя я не думаю, что какой-либо из них имеет отношение к делу). Любая помощь будет принята с благодарностью! Спасибо!

Answer 1

Ваш код в порядке. Я разделил js только для того, чтобы было легче читать. Ваша проблема в том, что у вас нет высоты для div или ваш путь неверен

function test(){ document.getElementById('bigdisplay').style.backgroundImage=
'url("https://res.cloudinary.com/rss81/image/upload/gw.jpg")'}

html,body,div{
height:100%;
}

<div id="bigdisplay" onmouseover="test()">
test
</div>

Answer 2

Я думаю, что одна проблема в том, что вы использовали одинарную кавычку для цитирования 'images / Slideshow1.png'. Но вы использовали одинарную кавычку и для 'url (' images / Slideshow1.png ')'. Так что есть конфликт. Попробуйте 'url ("images / Slideshow1.png")'. Я считаю, что для этого лучше определить функцию-обработчик событий в документе js, связанном с html-документом.

Answer 3

Вы неправильно экранируете строку в атрибуте. Вместо этого присоедините слушатель в Javascript, а не в атрибутах HTML (что так же плохо, как eval), и вам будет легче читать и писать:

const bigdisplay = document.querySelector('#bigdisplay');
document.querySelector('#image1').addEventListener('mouseover', () => {
  bigdisplay.style.backgroundImage = "url('images/Slideshow1.png')";
});