如何用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()">