Question

我刚开始学习javascript而且我很难用这个。我有3个图像都共享“预览”的类属性我正在尝试编写一个javascript函数，当我鼠标悬停任何图像时，我得到图像的来源并使用它设置background-image：url（' “）;在我的css中，对该图像的来源使用不同的div，以便在另一个div中显示图像。我一直在寻找答案，我可能会问错误的问题。这就是我目前所拥有的：

function upDate(previewPic){
  var img = document.getElementClassName("preview").getAttribute('src');

  img.onmouseover = function() {
    document.getElementById("image").style.backgroundImage = img; 
  }
}

什么是更好的方法来实现这一目标？

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Photo Gallery</title>
    <link rel="stylesheet" href="css/gallery.css">
    <script src = "js/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 = "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()">

    <script src="js/index.js"></script>

</body>
</html>

使用javascript设置图库

0 个答案: