javascript - onmouseover javascript 照片库

Question

我正在尝试制作一个照片库，其中 div 元素的背景图像会更改为您将鼠标悬停在其缩略图上的图像(不能使用 jQuery 来实现此目的)。

这是我的 HTML 和 JS 代码:

function displayImage(event) {
  event = event || window.event;
  var targetElement = event.target || event.srcElement;

  if (targetElement.tagName == "IMG") {
    document.getElementById("viewer").style.backgroundImage = targetElement.getAttribute("src");
  }
}

<div id="viewer">
  <p>Hover over the image to display larger</p>
</div>

<div class="thumbnails" onmouseover="displayImage(event)">
  <div class="thumb-container">
    <img src="img/267400-R1-E003.jpg" />
  </div>
</div>

其中 viewer id 是我希望显示照片的 div 元素的 ID，并且 onmouseover=displayImage 在我的图像标签的 div 容器标签中调用.

Answer 1

您必须将图像 src 包装到 url() 中，因为这就是 CSS background-image 的方式。作品:

function displayImage(event) {
    event = event || window.event;
    var targetElement = event.target || event.srcElement;

    if (targetElement.tagName == "IMG") {
        document.getElementById("viewer").style.backgroundImage = 'url(' + targetElement.getAttribute("src") + ')';
    }
}

#viewer {
    height: 200px;
    width: 800px;
}

<div id="viewer">
    <p></p>
</div>

<div class="thumbnails" onmouseover="displayImage(event)">
    <div class="thumb-container">
        <img src="http://media.caranddriver.com/images/media/51/dissected-lotus-based-infiniti-emerg-e-sports-car-concept-top-image-photo-451994-s-original.jpg">
    </div>
</div>