javascript - 创建具有悬停效果的响应式图像映射

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 站点，这个主图像是 slider 插件的一部分，因此我使用 javascript 为第二个图像添加 html。我创建了以下区域 map

<!-- 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 在整个图像上创建了一个悬停，但我需要它在区域 map 上，我试图让它像淡入一样平滑过渡。我的 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";