I have seen a few tutorials online but none of them truly lead to what I want. My home page can be seen here:
https://www.shuanandlebowitz.website/
Basically the main image when you load (https://www.shuanandlebowitz.website/wp-content/uploads/2015/03/Front-Page-Image-1.jpg) is a t shirt. I am trying to make it such that when you hover over that shirt then it transitions to the following image which is identical but a red shirt with letters on it as shown here:
https://www.shuanandlebowitz.website/wp-content/uploads/2015/03/Front-Page-Image-2.jpg
My site is a wordpress site and this main image is apart of a slider plugin and therefore I am using javascript to add the html for the second image. I have created the following area 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>
My javascript creates a hover over the entire image but I need it to be over the area map and I am trying to make it a smooth transition like a fade in. My JS is as follows:
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();
});
