Как изменить фоновое изображение в файле js, но не URL-адрес жесткого кодирования - PullRequest
Новая
       190

Как изменить фоновое изображение в файле js, но не URL-адрес жесткого кодирования

0 голосов
/ 29 мая 2020

Я не могу понять, почему я не могу изменить фоновые изображения, когда использую события onmouseover. Моя цель - когда я наведу указатель мыши на первый pi c, тогда этот pi c появится в верхней части страницы, когда я наведу указатель мыши на другой pi c, тогда этот новый pi c будет отображаться вместо этого вверху, затем, когда я наведу указатель мыши на третий пи c, третий пи c появится вверху. Здесь я прикрепил свои коды html и js. Пожалуйста, помогите мне. 

function upDate(previewPic){
    // document.getElementById("image").style.backgroundColor = "green";
    document.getElementById("image").style.backgroundColor = "url(previewPic.src)";
    document.getElementById("image").innerHTML = previewPic.alt + ".  this is onmouseover events";
}

function unDo(){
    document.getElementById("image").style.backgroundColor = "#8e68ff";
    document.getElementById("image").innerHTML = "Hover over an image below to display here.";
}
<div id = "image">
    Hover over an image below to display here.
</div>

<img class = "preview"
     alt = "Styling with a Bandana"
     src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg"
     onmouseover = "upDate(this)"
     onmouseout = "unDo()">

<img class = "preview"
     alt = "With My Boy"
     src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG"
     onmouseover = "upDate(this)"
     onmouseout = "unDo()">

<img class = "preview"
     src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg"
     alt = "Young Puppy"
     onmouseover = "upDate(this)"
     onmouseout = "unDo()">

Ответы [ 3 ]

1 голос
/ 29 мая 2020 
document.getElementById("image").style.backgroundColor = "#8e68ff";

Приведенный выше код недействителен, прежде всего, вам необходимо предоставить уникальный идентификатор для вашего HTML элемента, например - 

<img class = "preview"
 id="preview1"
 src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg"
 alt = "Young Puppy"
 onmouseover = "upDate(this)"
 onmouseout = "unDo()">

Теперь вы можно получить доступ к этому элементу изображения HTML с помощью идентификатора и изменить его sr c следующим образом - 

document.getElementById("preview1").src = "hackanm.gif";

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

1 голос
/ 29 мая 2020

'previewPi c .sr c' кажется переменной, которая использовалась как строка. Вы должны заменить этот фрагмент кода 

document.getElementById("image").style.backgroundColor = "url(previewPic.src)";

на 

document.getElementById("image").style. backgroundImage = "url('"+previewPic.src+"')";
0 голосов
/ 29 мая 2020

Вам нужно изменить следующие вещи.

  1. div должно иметь backgroundImage, а не backgroundColor.
  2. вы должны установить url таким образом "url('" + previewPic.src + "')"
  3. Удалить backgroundImage в unDo() с помощью document.getElementById("image").style.backgroundImage = "";

Все, что вам нужно обновить это одна строка, подобная этой document.getElementById("image").style.backgroundImage = "url('" + previewPic.src + "')";

Проверьте результат ниже. 

function upDate(previewPic){
    // document.getElementById("image").style.backgroundColor = "green";
    document.getElementById("image").style.backgroundImage = "url('" + previewPic.src + "')";
    document.getElementById("image").innerHTML = previewPic.alt + ".  this is onmouseover events";
}

function unDo(){
    document.getElementById("image").style.backgroundImage = "";
    document.getElementById("image").style.backgroundColor = "#8e68ff";
    document.getElementById("image").innerHTML = "Hover over an image below to display here.";
}
<div id = "image">
    Hover over an image below to display here.
</div>

<img class = "preview"
     alt = "Styling with a Bandana"
     src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg"
     onmouseover = "upDate(this)"
     onmouseout = "unDo()">

<img class = "preview"
     alt = "With My Boy"
     src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG"
     onmouseover = "upDate(this)"
     onmouseout = "unDo()">

<img class = "preview"
     src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg"
     alt = "Young Puppy"
     onmouseover = "upDate(this)"
     onmouseout = "unDo()">
...