创建具有悬停效果的自适应图像地图

Question

我在网上看到了一些教程，但没有一个能真正带来我想要的东西。我的主页可以在这里看到：

https://www.shuanandlebowitz.website/

基本上，加载（https://www.shuanandlebowitz.website/wp-content/uploads/2015/03/Front-Page-Image-1.jpg）时的主图像是T恤。我试图使它悬停在那件衬衫上时，它会过渡到以下图像，该图像是相同的，但上面有字母的红色衬衫，如下所示：

https://www.shuanandlebowitz.website/wp-content/uploads/2015/03/Front-Page-Image-2.jpg

我的站点是一个wordpress站点，此主图像是一个滑块插件的一部分，因此我正在使用javascript为第二个图像添加html。我已经创建了以下区域地图

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://www.shuanandlebowitz.website/wp-content/uploads/2015/03/Front-Page-Image-1.jpg" usemap="#image-map">

<map name="image-map">
<area target="" alt="" title="" href="" coords="515,91,553,72,661,21,804,18,928,67,979,92,1043,154,1130,218,1034,332,994,318,982,335,997,537,1003,682,1004,747,803,759,638,755,513,751,506,444,502,341,479,347,382,239" shape="poly">
</map>

我的javascript在整个图像上创建了一个鼠标悬停，但是我需要将其悬停在区域地图上，并且我正在尝试使其平滑过渡，例如淡入淡出。我的JS如下：

function setUpClickMeImage() {
var image = document.querySelector('.carousel-inner .image');

if (image) {
    // Need to wrap the image div in a link
    var parent = image.parentNode;
    parent.removeChild(image);

    var newLink = document.createElement('a');
    newLink.href = 'https://www.shuanandlebowitz.website/shop/';

    newLink.appendChild(image);
    parent.appendChild(newLink);

    // This will force the 2nd image to load so that it is ready to show
    image.style.backgroundImage = "url('https://www.shuanandlebowitz.website/wp-content/uploads/2015/03/Front-Page-Image-2.jpg')";

    // Put the original image back after 1 ms so that it will appear first, but 2nd image will still be preloaded and ready to show
    setTimeout(function() {
        image.style['background-image'] = "url('https://www.shuanandlebowitz.website/wp-content/uploads/2015/03/Front-Page-Image-1.jpg')";
    }, 1);

    // Bring the link to the front so nothing is in its way
    newLink.style.zIndex = 50;
    image.style.zIndex = 50;

    // Add the events for mouseover and mouseleave
    image.addEventListener('mouseenter', function() { 
        image.style.backgroundImage = "url('https://www.shuanandlebowitz.website/wp-content/uploads/2015/03/Front-Page-Image-2.jpg')";
    });

    image.addEventListener('mouseleave', function() { 
        image.style['background-image'] = "url('https://www.shuanandlebowitz.website/wp-content/uploads/2015/03/Front-Page-Image-1.jpg')";
    });
}
}

jQuery(function($) {
  setUpClickMeImage();
});

Answer 1

使用现有的HTML结构最简单的方法是使用CSS transitions。具体来说，添加一行CSS（可以在JS中完成）。例如：

image.style.transition = "background-image 200ms ease-in-out";