RollOver нацеленный на отображение сетчатки не работает в JavaScript

Question

Я создал функцию для зацикливания некоторых изображений и просто применил к ним функцию прокрутки.

Поскольку я поддерживаю изображения сетчатки, я использую тег picture, поэтому каждое из моих изображений выглядитвот так.

<picture>
   <source media=" (max-width: 767px)" srcset="images/home-page/mobile/mobile_eye_linner.jpg?$staticlink$, images/home-page/mobile/mobile_eye_linner_2x.jpg?$staticlink$ 2x" />
   <source media="(min-width: 480px) and (max-width: 767px)" srcset="images/home-page/smartphone/smartphone_eye_linner.jpg?$staticlink$, images/home-page/smartphone/smartphone_eye_linner_2x.jpg?$staticlink$ 2x" />
   <source media="(min-width: 768px) and (max-width: 1023px)" srcset="images/home-page/tablet/eyes-on-you-1-hover-tablet.jpg?$staticlink$, images/home-page/tablet/eyes-on-you-1-hover-tablet_2x.jpg?$staticlink$ 2x" />
   <img id="hover-1" alt="Juicy Couture Oui Slay EyeLiner" class="rollover" src="images/home-page/desktop/eyes-on-you-desktop-1.jpg?$staticlink$" srcset="images/home-page/desktop/eyes-on-you-desktop-1.jpg?$staticlink$, images/home-page/desktop/eyes-on-you-desktop-2x-1.jpg?$staticlink$ 2x"
      />
</picture>

И это фрагмент JavaScript, который выделяет rollOver & rollOut и цикл изображений.

function rollOver(elem, src) {
    console.log('rollOver src', src);
    if (!elem.srcset) {
        document.getElementById(elem).src = src;
    }
    document.getElementById(elem).srcset = src;
}

function rollOut(elem, src) {
    console.log('rollOut src', src);
    if (!elem.srcset) {
        document.getElementById(elem).src = src;
    }
    document.getElementById(elem).srcset = src;

}

if (!String.prototype.splice) {
    /** * {JSDoc} * * The splice() method changes the content of a string by removing a range of * characters and/or adding new characters. * * @this {String} * @param {number} start Index at which to start changing the string. * @param {number} delCount An integer indicating the number of old chars to remove. * @param {string} newSubStr The String that is spliced in. * @return {string} A new string with the spliced substring. */
    String.prototype.splice = function (start, delCount, newSubStr) {
        return this.slice(0, start) + newSubStr + this.slice(start + Math.abs(delCount));
    };
}

document.addEventListener("DOMContentLoaded", function (event) {
    var rollOverCollectionB = document.getElementById("roll-over-collection-b").getElementsByClassName("rollover");
    rollOverCollectionB = Array.prototype.slice.apply(rollOverCollectionB);
    console.log("rollOverCollectionB", rollOverCollectionB);

    rollOverCollectionB.forEach(function (rollOverItem, i) {
        console.log('rollOverItem', rollOverItem);
        on("mouseover", "#" + rollOverItem.id, function (element) {
            if (!element.srcset) {
                var srcObj = element.src.splice(173, 0, '-hover');
                srcObj.splice(362, 0, 'hover-')
                rollOver(element.id, srcObj);
            }
            var srcObj = element.srcset.splice(173, 0, '-hover');

            srcObj.splice(362, 0, 'hover-')
            rollOver(element.id, srcObj);

        }.bind(this, rollOverItem));

        on("mouseout", "#" + rollOverItem.id, function (element) {
            if (!element.srcset) {
                rollOut(element.id, element.src.replace('-hover', '').replace('hover-', ''));
            }
            rollOut(element.id, element.srcset.replace('-hover', '').replace('hover-', ''));

        }.bind(this, rollOverItem));
    });
});

I consoled что происходило, когда на экране сетчатки глаза, и кажется, что функции rollOver и rollOut не работают с версиями сетчатки.

Чего мне не хватает?

Заранее спасибо!

ОБНОВЛЕНИЕ

Я добавил consoles, чтобы посмотреть, что происходит ... Ориентация на mouseoverи mouseout.

rollOverCollectionB.forEach(function (rollOverItem, i) {
  on("mouseover", "#" + rollOverItem.id, function (element) {
    if (!element.srcset) {
      var srcObj = element.src.splice(173, 0, '-hover');
      console.log('src var srcObj = element.src.splice(173, 0, "-hover")', srcObj); // checkit!

      srcObj.splice(362, 0, '-hover')
      console.log('src version srcObj.splice(362, 0, "-hover")', srcObj); // AND HERE!
      rollOver(element.id, srcObj);
    }
    var srcObj = element.srcset.splice(173, 0, '-hover');
    console.log('srcset var srcObj = element.srcset.splice(173, 0, "-hover")', srcObj);
    srcObj.splice(362, 0, '-hover')
    console.log('srcset var srcObj.splice(362, 0, "-hover")', srcObj); // AND HERE TOO!
    rollOver(element.id, srcObj);

  }.bind(this, rollOverItem));

  on("mouseout", "#" + rollOverItem.id, function (element) {
    if (!element.srcset) {
      rollOut(element.id, element.src.replace('-hover', '').replace('hover-', ''));
    }
    rollOut(element.id, element.srcset.replace('-hover', '').replace('hover-', ''));

  }.bind(this, rollOverItem));
});

Я думаю, это добавит к версии Retina / 2x ...

 var srcObj = element.srcset.splice(173, 0, '-hover');
     console.log('srcset var srcObj = element.srcset.splice(173, 0, "-hover")', srcObj);
     srcObj.splice(362, 0, '-hover')
     console.log('srcset var srcObj.splice(362, 0, "-hover")', srcObj);

Проверьте console...

* Полный HTML, CSS и JS приведен во фрагменте кода ниже.

var on = function(event, elem, callback, capture) {
  console.log('elem in onFunction', elem);
  console.log('elem in onFunction', typeof elem);
  if (typeof elem === "function") {
    capture = callback;
    callback = elem;
    elem = window;
  }
  capture = !!capture;
  elem = typeof elem === "string" ? document.querySelector(elem) : elem;
  if (!elem) return;
  elem.addEventListener(event, callback, capture);
};

function rollOver(elem, src) {
  console.log('rollOver src', src);
  if (!elem.srcset) {
    document.getElementById(elem).src = src;
  }
  document.getElementById(elem).srcset = src;
}

function rollOut(elem, src) {
  console.log('rollOut src', src);
  if (!elem.srcset) {
    document.getElementById(elem).src = src;
  }
  document.getElementById(elem).srcset = src;

}

if (!String.prototype.splice) {
  /** * {JSDoc} * * The splice() method changes the content of a string by removing a range of * characters and/or adding new characters. * * @this {String} * @param {number} start Index at which to start changing the string. * @param {number} delCount An integer indicating the number of old chars to remove. * @param {string} newSubStr The String that is spliced in. * @return {string} A new string with the spliced substring. */
  String.prototype.splice = function(start, delCount, newSubStr) {
    return this.slice(0, start) + newSubStr + this.slice(start + Math.abs(delCount));
  };
}
document.addEventListener("DOMContentLoaded", function(event) {
  var rollOverCollectionB = document.getElementById("roll-over-collection-b").getElementsByClassName("rollover");
  rollOverCollectionB = Array.prototype.slice.apply(rollOverCollectionB);
  console.log("rollOverCollectionB", rollOverCollectionB);

  rollOverCollectionB.forEach(function(rollOverItem, i) {
    console.log('rollOverItem', rollOverItem);
    on("mouseover", "#" + rollOverItem.id, function(element) {
      if (!element.srcset) {
        var srcObj = element.src.splice(173, 0, '-hover');
        srcObj.splice(362, 0, 'hover-')
        rollOver(element.id, srcObj);
      }
      var srcObj = element.srcset.splice(173, 0, '-hover');

      srcObj.splice(362, 0, 'hover-')
      rollOver(element.id, srcObj);

    }.bind(this, rollOverItem));

    on("mouseout", "#" + rollOverItem.id, function(element) {
      if (!element.srcset) {
        rollOut(element.id, element.src.replace('-hover', '').replace('hover-', ''));
      }
      rollOut(element.id, element.srcset.replace('-hover', '').replace('hover-', ''));

    }.bind(this, rollOverItem));
  });
});

.homepage-banner .offers-banner .button {
  background-color: #000;
}

.homepage-banner .offers-banner .button a {
  color: #fff;
}

.homepage-banner .offers-banner a {
  margin: 0px auto;
}

.homepage-banner .offers-banner {
  text-align: center;
  padding: 20px 0 0;
  margin: 50px auto 0;
  bottom: inherit;
  position: relative;
}

.homepage-banner .offers-banner h2 {
  margin-bottom: 8px;
  width: 90%;
  font-size: 36px;
  padding: 0;
  line-height: 34px;
  margin: 0 0 10px;
}

.homepage-banner .offers-banner p {
  font-family: termina, sans-serif;
  margin: 25px auto !important;
  font-weight: 600;
  font-size: 15px;
  text-align: center
}

.homepage-banner .offers-banner p:last-of-type {
  margin-bottom: 0;
}


/* .homepage-banner .offers-banner a:hover {
      color: #000;
    } */

.homepage-banner .offers-banner .offer-banner-content-wrapper {
  position: relative;
}

.homepage-banner .offers-banner .offers-listing-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  text-align: left;
  margin: 0 auto;
  -ms-flex-flow: nowrap;
  flex-flow: nowrap;
  -ms-flex-item-align: start;
  align-self: flex-start;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.homepage-banner .offers-banner .offers-listing-container .item {
  width: 33%;
  text-align: center;
  padding-bottom: 10px;
}

.homepage-banner .offers-banner .offers-listing-container .item .item-name {
  margin: 20px auto 0;
}

.homepage-banner .offers-banner .offers-listing-container .item .item-name p {
  text-align: center;
  font-size: 16px;
  line-height: 20px;
  margin: 20px auto 0;
  text-transform: uppercase;
}

.homepage-banner .offers-banner .offers-listing-container .item:nth-of-type(2n) {
  margin: 0;
}

.homepage-banner .offers-banner .offers-listing-container .item .item-name .button.button-helper {
  margin-bottom: 0;
  padding: 3px 8px;
  background-color: #e87ea6;
  border-color: #e87ea6;
  border-radius: 0;
  border-style: solid;
  border-width: 1px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  padding: .23em 2em;
  text-align: center;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  outline: 0;
  font-family: termina, sans-serif;
  font-weight: 500;
  font-style: normal;
  -webkit-font-kerning: none;
  -moz-font-kerning: none;
  font-kerning: none;
  text-transform: uppercase;
  line-height: inherit;
  height: inherit;
}

div#roll-over-collection-b {
  position: absolute;
}

@media screen and (min-width: 1024px) and (max-width: 1199px) {
  .homepage-banner .offers-banner .offers-listing-container .item {
    width: 30%;
  }
  .homepage-banner .offers-banner .offers-listing-container .item:nth-of-type(2n) {
    margin: 0 2em;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .homepage-banner .offers-banner .offers-listing-container .item:nth-of-type(2n) {
    margin: 0 3em;
  }
  .homepage-banner .offers-banner .offers-listing-container .item {
    width: 26%;
  }
}

@media screen and (max-width: 767px) {
  .homepage-banner .offers-banner {
    margin: 0;
  }
  .homepage-banner .offers-banner picture>img {
    /* width: 100%; */
    height: auto;
    line-height: 0;
    vertical-align: bottom;
  }
  .homepage-banner .offers-banner h2 {
    font-size: 24px;
    line-height: 26px;
    width: 95%;
    margin: 0 auto 10px;
  }
  .homepage-banner .offers-banner p {
    width: 95%;
    margin: 0px auto 10px;
    font-size: 16px;
    font-weight: 400;
  }
  .homepage-banner .offers-banner .button {
    background-color: #fff;
  }
  /* .homepage-banner .offers-banner .button a {
        color: #000;
      } */
  .homepage-banner .offers-banner .offers-listing-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: left;
    margin: 0 auto;
    -ms-flex-flow: wrap;
    flex-flow: wrap;
    -ms-flex-item-align: start;
    align-self: flex-start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .homepage-banner .offers-banner .offers-listing-container .item {
    width: 100%;
    margin: 0px auto 3em;
  }
  .homepage-banner .offers-banner .offers-listing-container .item img {
    width: 50%;
  }
  .homepage-banner .offers-banner .offers-listing-container .item:nth-of-type(2n) {
    margin: 0px auto 3.5em;
  }
  .homepage-banner .offers-banner .offers-listing-container .item:last-of-type {
    margin: 0px auto;
  }
  .homepage-banner .offers-banner .offers-listing-container .item p {
    margin-bottom: 20px;
  }
}

@media screen and (min-width: 480px) and (max-width: 767px) {
  .homepage-banner .offers-banner .offers-listing-container .item img {
    width: 56%;
  }
}

@media screen and (max-width: 479px) {
  .homepage-banner .offers-banner .offers-listing-container .item img {
    width: 60%;
  }
}

<div class="offers-banner">
  <picture>
    <source media=" (max-width: 767px)" srcset="images/home-page/mobile/eyes-on-you-statement-banner-mobile.jpg?$staticlink$, images/home-page/mobile/eyes-on-you-statement-banner-mobile_2x.jpg?$staticlink$ 2x" />
    <source media="(min-width: 480px) and (max-width: 767px)" srcset="eyes-on-you-statement-banner-sp.jpg?$staticlink$?$staticlink$,images/home-page/smartphone/eyes-on-you-statement-banner-sp_2x.jpg?$staticlink$ 2x" />
    <source media="(min-width: 768px) and (max-width: 1023px)" srcset="images/home-page/tablet/eyes-on-you-statement-banner-tablet.jpg?$staticlink$, images/home-page/tablet/eyes-on-you-statement-banner-tablet_2x.jpg?$staticlink$ 2x" />
    <img class="new-makeup-banner" alt="Eyes On You!" src="images/home-page/desktop/eyes-on-you-statement-banner-desktop.jpg?$staticlink$" srcset="images/home-page/desktop/eyes-on-you-statement-banner-desktop.jpg?$staticlink$, images/home-page/desktop/eyes-on-you-statement-banner-desktop_2x.jpg?$staticlink$ 2x"
    />
  </picture>
  <p>Twinkle, twinkle, you star! Transform your <br> holiday look with Juicy Couture Beauty. </p>
  <div class="offer-banner-content-wrapper">
    <div id="roll-over-collection-b" class="offers-listing-container">
      <div class="item">
        <a href="$url('Product-Show','pid','1502A0116919')$">
          <picture>
            <source media=" (max-width: 767px)" srcset="images/home-page/mobile/mobile_eye_linner.jpg?$staticlink$, images/home-page/mobile/mobile_eye_linner_2x.jpg?$staticlink$ 2x" />
            <source media="(min-width: 480px) and (max-width: 767px)" srcset="images/home-page/smartphone/smartphone_eye_linner.jpg?$staticlink$, images/home-page/smartphone/smartphone_eye_linner_2x.jpg?$staticlink$ 2x" />
            <source media="(min-width: 768px) and (max-width: 1023px)" srcset="images/home-page/tablet/eyes-on-you-1-hover-tablet.jpg?$staticlink$, images/home-page/tablet/eyes-on-you-1-hover-tablet_2x.jpg?$staticlink$ 2x" />
            <img id="hover-1" alt="Juicy Couture Oui Slay EyeLiner" class="rollover" src="images/home-page/desktop/eyes-on-you-desktop-1.jpg?$staticlink$" srcset="images/home-page/desktop/eyes-on-you-desktop-1.jpg?$staticlink$, images/home-page/desktop/eyes-on-you-desktop-2x-1.jpg?$staticlink$ 2x"
            />
          </picture>
          <div class="item-name">
            <div class="button button-helper">SHOP NOW</div>
          </div>
        </a>
      </div>

      <div class="item">
        <a href="$url('Product-Show','pid','1502A0116950')$">
          <picture>
            <source media=" (max-width: 767px)" srcset=" images/home-page/mobile/mobile_EYE_TOPPER.jpg?$staticlink$, images/home-page/mobile/mobile_EYE_TOPPER_2x.jpg?$staticlink$ 2x" />
            <source media="(min-width: 480px) and (max-width: 767px)" srcset="images/home-page/smartphone/SMARTPHONE_EYE_TOPPER.jpg?$staticlink$, images/home-page/smartphone/SMARTPHONE_EYE_TOPPER_2X-.jpg?$staticlink$ 2x" />
            <source media="(min-width: 768px) and (max-width: 1023px)" srcset="images/home-page/tablet/eyes-on-you-2-hover-tablet.jpg?$staticlink$, images/home-page/tablet/eyes-on-you-2-hover-tablet_2x.jpg?$staticlink$ 2x" />
            <img id="hover-2" alt="Juicy Couture Lip + Eye Topper" class="rollover" src="images/home-page/desktop/eyes-on-you-desktop-2.jpg?$staticlink$" srcset="images/home-page/desktop/eyes-on-you-desktop-2.jpg?$staticlink$, images/home-page/desktop/eyes-on-you-desktop-2x-2.jpg?$staticlink$ 2x"
            />
        </a>
        </picture>

        <div class="item-name">
          <div class="button button-helper">SHOP NOW </div>
        </div>
        </a>
      </div>

      <div class="item">
        <a href="$url('Product-Show','pid','1502A0116930')$">
          <picture>
            <source media=" (max-width: 767px)" srcset="images/home-page/mobile/mobile_color_palette.jpg?$staticlink$, images/home-page/mobile/mobile_color_palette_2x.jpg?$staticlink$ 2x" />
            <source media="(min-width: 480px) and (max-width: 767px)" srcset="images/home-page/smartphone/eyes-on-you-eye-liner-sp.jpg?$staticlink$, images/home-page/smartphone/smartphone_color_palette_2x.jpg?$staticlink$ 2x" />
            <source media="(min-width: 768px) and (max-width: 1023px)" srcset="images/home-page/tablet/eyes-on-you-3-hover-tablet.jpg?$staticlink$, images/home-page/tablet/eyes-on-you-3-hover-tablet_2x.jpg?$staticlink$ 2x" />
            <img id="hover-3" alt="Juicy Couture The Shady Color Palette" class="rollover" src="images/home-page/desktop/eyes-on-you-desktop-3.jpg?$staticlink$" srcset="images/home-page/desktop/eyes-on-you-desktop-3.jpg?$staticlink$, images/home-page/desktop/eyes-on-you-desktop-2x-3.jpg?$staticlink$ 2x"
            />
          </picture>
          <div class="item-name">
            <div class="button button-helper">SHOP NOW </div>
          </div>
        </a>
      </div>

    </div>
    <div class="bkgrd-img">
      <picture>
        <source media=" (max-width: 479px)" srcset="images/home-page/mobile/updated_mobile_eyes_on_you_background.jpg?$staticlink$, images/home-page/mobile/updated_mobile_eyes_on_you_background_2x.jpg?$staticlink$ 2x " />
        <source media="(min-width: 480px) and (max-width: 767px)" srcset="images/home-page/smartphone/updated_smartphone_eyes_on_you_background.jpg?$staticlink$, images/home-page/smartphone/smartphone_eyes_on_you_background_2x-up.jpg?$staticlink$ 2x" />
        <source media="(min-width: 768px) and (max-width: 1023px)" srcset="images/home-page/tablet/eyes-on-you-background-tablet.jpg?$staticlink$, images/home-page/tablet/eyes-on-you-background-tablet_2x.jpg?$staticlink$ 2x " />
        <img alt="" src="images/home-page/desktop/EYES_ON_YOU_desktop_HP_background.jpg?$staticlink$" srcset="images/home-page/desktop/EYES_ON_YOU_desktop_HP_background.jpg?$staticlink$, images/home-page/desktop/EYES_ON_YOU_desktop_HP_background_@2x.jpg?$staticlink$ 2x"
        />
      </picture>
    </div>
  </div>
</div>