natewoodbridge
3/14/2018 - 10:27 AM

Hover images

Hover images

var hoverImages = {
  preloaded: [],
  tempImg: null,
  registerImages: function(selector) {  
    var images = document.querySelectorAll(selector) || [];
    images.forEach(this.registerImage.bind(this));
  },
  
  registerImage: function(image) {
    var hoverSrc = image.dataset.hoverImage || null;
    if(!hoverSrc) return;
    
    this.tempImg = new Image();
    this.tempImg.addEventListener('load', this.registerEvents.bind(this, image, hoverSrc));
    this.tempImg.src = hoverSrc;
    
    this.preloaded.push(this.tempImg);
  },

  registerEvents: function(originalImage, hoverSrc) {
    var originalSrc = originalImage.src || '';
    originalImage.addEventListener('mouseover', this.hover.bind(this, originalImage, hoverSrc));
    originalImage.addEventListener('mouseout', this.hover.bind(this, originalImage, originalSrc));
  },
  
  hover: function(image, src) {
    image.src = src;
  }
  
};


hoverImages.registerImages('img[data-hover-image]');