如何更改 js 文件中的背景圖像而不是硬編碼 url

Question

我無法弄清楚為什么我在使用onmouseover事件時無法更改背景圖像。 我的目標是當我將鼠標放在第一張照片上時，這張照片會顯示在頁面頂部，當我將鼠標移動到另一張照片時，這張新照片將顯示在頂部，然后當我將鼠標移動到第三張圖片，第三張圖片將顯示在頂部。 這里附上我的 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()">

Answer 1

'previewPic.src' 似乎是一個已用作字符串的變量。 你應該替換這段代碼

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

和

document.getElementById("image").style. backgroundImage = "url('"+previewPic.src+"')";

Answer 2

document.getElementById("image").style.backgroundColor = "#8e68ff";

上面的代碼首先是無效的，你需要為你的 HTML 元素提供一個唯一的 id，比如 -

<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()">

現在您可以使用 id 訪問此 HTML 圖像元素並像這樣更改其 src -

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

如果您使用多個圖像元素，請注意您必須為它們使用不同的 id。

Answer 3

您需要更改以下內容。

1. div應該有backgroundImage而不是backgroundColor 。
2. 你必須這樣設置url "url('" + previewPic.src + "')"
3. 使用document.getElementById("image").style.backgroundImage = "";在unDo()中刪除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()">