如何在javascript中使用图像的src更改标识符的url?

Question

我想将光标悬停在图像上并将其作为另一个div的背景图像打开。我正在 js 中执行以下操作：

function upDate(previewPic){
document.getElementById("image").style.backgroundImage="url(previewPic.src)";
}

src包含一个在线链接，所以不用担心。我想通过 id "image" 访问div 并将其 bg 图像的 url 替换为我悬停在的图像 src。我做了一个函数调用，向我发送了当前图像悬停的对象。

以下是完整的代码：

function upDate(previewPic){
document.getElementById("image").style.backgroundImage="url(previewPic.src)";
}

#image {
line-height: 650px;
width: 575px;
height: 650px;
border: 5px solid black;
margin: 0 auto;
background-color: #8e68ff;
background-image: url('');
background-repeat: no-repeat;
color: #FFFFFF;
text-align: center;
background-size: 100%;
margin-bottom: 25px;
font-size: 150%;
}
.preview {
width: 10%;
margin-left: 17%;
border: 10px solid black;
}

<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

你想要应用类似于以下 CSS 的东西：

background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg");

但你实际上是在这样做：

background-image: url(previewPic.src);

这是您需要更新的 javascript 行，并更正了字符串连接：

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

代码片段：

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

#image {
line-height: 650px;
width: 575px;
height: 650px;
border: 5px solid black;
margin: 0 auto;
background-color: #8e68ff;
background-image: url('');
background-repeat: no-repeat;
color: #FFFFFF;
text-align: center;
background-size: 100%;
margin-bottom: 25px;
font-size: 150%;
}
.preview {
width: 10%;
margin-left: 17%;
border: 10px solid black;
}

<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('https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg')" 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('https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG')" onmouseout="unDo()">
<img class="preview" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg" alt="Young Puppy" onmouseover="upDate('https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg')" onmouseout="unDo()">