title: Creating a responsive image map with hover effects
body: <p>I have seen a few tutorials online but none of them truly lead to what I want. My home page can be seen here:</p>
  
  <p><a href="https://www.shuanandlebowitz.website/" rel="nofollow noreferrer">https://www.shuanandlebowitz.website/</a></p>
  
  <p>Basically the main image when you load (<a href="https://www.shuanandlebowitz.website/wp-content/uploads/2015/03/Front-Page-Image-1.jpg" rel="nofollow noreferrer">https://www.shuanandlebowitz.website/wp-content/uploads/2015/03/Front-Page-Image-1.jpg</a>) 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:</p>
  
  <p><a href="https://www.shuanandlebowitz.website/wp-content/uploads/2015/03/Front-Page-Image-2.jpg" rel="nofollow noreferrer">https://www.shuanandlebowitz.website/wp-content/uploads/2015/03/Front-Page-Image-2.jpg</a></p>
  
  <p>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</p>
  
  <pre><code>&lt;!-- Image Map Generated by http://www.image-map.net/ --&gt;
  &lt;img src="https://www.shuanandlebowitz.website/wp-content/uploads/2015/03/Front-Page-Image-1.jpg" usemap="#image-map"&gt;
  
  &lt;map name="image-map"&gt;
  &lt;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"&gt;
  &lt;/map&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>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();
  });
  </code></pre>