Question

我不知道为什么我的以下代码没有更改图片ID的背景图片。当我将鼠标悬停在图像元素下方时，div标签的背景图像（id =＆＃34;图像＆＃34;）应更改为所选图像的网址。我甚至尝试过event.target.src但是失败了。虽然我能够更改元素的文本内容。代码中的问题是什么？（我的图像文件工作正常，它们在项目文件夹中）

＆＃13;

function upDate(previewPic){
   
    document.getElementById("image").style.backgroundImage=previewPic.src;
    document.getElementById("image").textContent=event.target.alt;

}

＆＃13;

/*Name this external file gallery.css*/
body{
    margin: 2%;
    border: 1px solid black;
    background-color: #b3b3b3;
}
#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;
}
img{
    width:95%;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Photo Gallery</title>
    <link rel="stylesheet" href="style.css">
    <script src = "gallery.js"></script>
</head>
<body>

<div id = "image">
    Hover over an image below to display here.
</div>

<img class = "preview" alt = "Styling with a Bandana" src = "1.jpg" onmouseover = "upDate(this)">

<img class = "preview" alt = "With My Boy" src = "2.JPG" onmouseover = "upDate(this)" >

<img class = "preview" src = "3.jpg" alt = "Young Puppy" onmouseover = "upDate(this)" >

</body>
</html>

＆＃13;

无法更改div的背景图片

0 个答案: