如何更改 js 文件中的背景图像而不是硬编码 url

Question

I cannot figure out why I can't change background images when I use onmouseover events. My goal is when I put mouse over first pic, then this pic will show up on the top of page, when I move my mouse to another pic, then this new pic will show up on the top instead, then when I move mouse to the third pic, the third pic will show up on the top. Here I attached my html code and js code. Please help me.

 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' seems to be a variable that has been used as a string. You should replace this piece of code

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

with

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

Answer 2

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

Above code is not valid first of all, you need to provide a unique id to your HTML element like -

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

Now you can access this HTML image element using the id and change its src like this -

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

If you are using multiple image elements, please note that you have to use different ids for them.

Answer 3

You need to change below things.

1. div should have backgroundImage not backgroundColor .
2. you have to set url this way "url('" + previewPic.src + "')"
3. Remove backgroundImage in unDo() with document.getElementById("image").style.backgroundImage = "";

All you need to update is one line like this document.getElementById("image").style.backgroundImage = "url('" + previewPic.src + "')";

Check your result below.

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