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

在targetElement.tagName上使用String.toUpperCase可能会解决您的问题。

Answer 2

你必须将图像src包装成url()，因为这就是CSS background-image的工作方式：

＆＃13;

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") + ')';
    }
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

onmouseover javascript照片库

2 个答案: