如何更改js文件中的背景图像而不是硬编码url
如何更改js文件中的背景图像而不是硬编码url
提问于 2020-05-29 18:43:25
当我使用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()">
回答 3
Stack Overflow用户
发布于 2020-05-29 19:52:40
“previewPic.src”似乎是已用作字符串的变量。您应该替换这段代码
document.getElementById("image").style.backgroundColor = "url(previewPic.src)";使用
document.getElementById("image").style. backgroundImage = "url('"+previewPic.src+"')";Stack Overflow用户
发布于 2020-05-29 19:54:22
document.getElementById("image").style.backgroundColor = "#8e68ff";以上代码无效首先，您需要为您的
元素提供一个唯一的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 image元素，并像这样更改它的src -
document.getElementById("preview1").src = "hackanm.gif";如果您使用多个图像元素，请注意您必须为它们使用不同的If。
Stack Overflow用户
发布于 2020-05-29 20:00:52
你需要改变下面的东西。
div应该有backgroundImage，而不是backgroundColor。在使用document.getElementById("image").style.backgroundImage = "";
的unDo()中，您必须以这种方式设置
-
urlbackgroundImage
您只需要更新一行代码，就像下面这样的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()">
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62084098
复制相关文章
相似问题
腾讯云开发者
