Создание адаптивной карты изображений с эффектами наведения - PullRequest
Новая
       8

Создание адаптивной карты изображений с эффектами наведения

0 голосов
/ 02 декабря 2018

Я видел несколько уроков онлайн, но ни один из них не привел к тому, что я хочу.Мою домашнюю страницу можно посмотреть здесь:

https://www.shuanandlebowitz.website/

В основном основное изображение при загрузке (https://www.shuanandlebowitz.website/wp-content/uploads/2015/03/Front-Page-Image-1.jpg) на рубашке. Я пытаюсь сделать так, чтобы когдаВы наводите курсор на эту рубашку, затем она переходит к следующему изображению, которое идентично, но красная рубашка с буквами на нем, как показано здесь:

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();
});

1 Ответ

0 голосов
/ 13 декабря 2018

Самый простой способ сделать это с имеющейся у вас структурой HTML - это использовать CSS transitions .В частности, добавление одной строки CSS (что можно сделать в JS).Например:

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

website hover

...