Как обойти изменчивость при манипулировании DOM в JavaScript?

Question

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

Это код:

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);
    document.getElementById(elem).srcset = src;
  }

  function rollOut(elem, src) {
    console.log('rollOut 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 rollOverCollectionA = document
      .getElementById("roll-over-collection-b")
      .getElementsByClassName("rollover");
    rollOverCollectionA = Array.prototype.slice.apply(rollOverCollectionA);
    console.log("rollOverCollectionA", rollOverCollectionA);
    var l = rollOverCollectionA.length;
    for (let i = 0; i < l; i++) {
      on("mouseover", "#" + rollOverCollectionA[i].id, function () {
        var srcObj = rollOverCollectionA[i].srcset.splice(174, 0, '-hover');
            srcObj.splice(362, 0, 'hover-')
        rollOver(rollOverCollectionA[i].id, srcObj);
      });
      on("mouseout", "#" + rollOverCollectionA[i].id, function () {
        rollOut(rollOverCollectionA[i].id, rollOverCollectionA[i].srcset);
      });
    }
  });

<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$ 1x"
          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$ 1x"
          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>

А вот рабочий прототип .Однако среда, в которой я работаю, создает проблемы, когда я пытаюсь получить атрибут srcset.Чтобы обойти это, я решил сделать снимок srcset и передать его в функцию rollOver.

Выдержка сверху.

  document.addEventListener("DOMContentLoaded", function (event) {
    var rollOverCollectionA = document
      .getElementById("roll-over-collection-b")
      .getElementsByClassName("rollover");

    rollOverCollectionA = Array.prototype.slice.apply(rollOverCollectionA);

    var l = rollOverCollectionA.length;
    for (let i = 0; i < l; i++) {
      on("mouseover", "#" + rollOverCollectionA[i].id, function () {
        var srcObj = rollOverCollectionA[i].srcset.splice(174, 0, '-hover');
            srcObj.splice(362, 0, 'hover-')
        rollOver(rollOverCollectionA[i].id, srcObj);
      });
      on("mouseout", "#" + rollOverCollectionA[i].id, function () {
        rollOut(rollOverCollectionA[i].id, rollOverCollectionA[i].srcset);
      });
    }
  });

Вот rollOver и rollOut функции

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

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

Я делал что-то вроде этого первоначально:

function rollOver(elem) {
  (document.getElementById(elem).srcset =
   "https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dw685f8968/images/home-page/desktop/eyes-on-you-desktop-hover-" +
    elem.slice(6) +
    ".jpg?$staticlink$"),
    "https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dw685f8968/images/home-page/desktop/eyes-on-you-desktop-2x-hover-" +
    elem.slice(6) +
    ".jpg?$staticlink$ 2x";
}

function rollOut(elem) {
  (document.getElementById(elem).srcset =
    "https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dw685f8968/images/home-page/desktop/eyes-on-you-desktop-" +
    elem.slice(6) +
    ".jpg?$staticlink$"),
    "https://staging.elizabetharden.pfsweb.demandware.net/on/demandware.static/-/Sites-JuicyCoutureBeauty-Library/default/dw685f8968/images/home-page/desktop/eyes-on-you-desktop-2x-" +
    elem.slice(6) +
    ".jpg?$staticlink$ 2x";
}

По существу, используя строку и при применении среза к id в ролловерефункции, а не в цикле.Я считаю, что я на правильном пути, так как опрокидывание работает один раз.Но что происходит, теперь, когда я мутировал строку, она просто продолжает снова и снова добавлять 'hover'!

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

Обновление:

Думаю, этот снимок может помочь, поскольку передает то, что я пытаюсь объяснить, происходит.

ОБНОВЛЕНИЕ II

Это то, что происходит сейчас

Answer 1

Приведенное ниже использование замены для удаления сращенных в -hover и hover-.

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);
    document.getElementById(elem).srcset = src;
  }

  function rollOut(elem, src) {
    console.log('rollOut 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 rollOverCollectionA = document
      .getElementById("roll-over-collection-b")
      .getElementsByClassName("rollover");
    rollOverCollectionA = Array.prototype.slice.apply(rollOverCollectionA);
    console.log("rollOverCollectionA", rollOverCollectionA);
    var l = rollOverCollectionA.length;
    for (let i = 0; i < l; i++) {
      on("mouseover", "#" + rollOverCollectionA[i].id, function () {
        var srcObj = rollOverCollectionA[i].srcset.splice(174, 0, '-hover');
            srcObj.splice(362, 0, 'hover-')
        rollOver(rollOverCollectionA[i].id, srcObj);
      });
      on("mouseout", "#" + rollOverCollectionA[i].id, function () {
        // remove the hovers
        rollOut(rollOverCollectionA[i].id, rollOverCollectionA[i].srcset.replace('-hover', '').replace('hover-',''));
      });
    }
  });

<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$ 1x"
          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$ 1x"
          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>

ОБНОВЛЕНИЕ Добавить фрагмент с alt, обновленный для использования литералов шаблона

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) {
  // it appears that the CMS is plopping the URL at the start of the string that includes ?$staticlink$
  let url1 = `images/home-page/desktop/eyes-on-you-desktop-hover-${elem.slice(6)}.jpg?$staticlink$`; 
  let url2 = `images/home-page/desktop/eyes-on-you-desktop-2x-hover-${elem.slice(6)}.jpg?$staticlink$`; 

  document.getElementById(elem).srcset = `${url1}, ${url2}`;
  console.log("rollOver", document.getElementById(elem).srcset);
}

function rollOut(elem) {
  // it appears that the CMS is plopping the URL at the start of the string that includes ?$staticlink$
  let url1 = `images/home-page/desktop/eyes-on-you-desktop-${elem.slice(6)}.jpg?$staticlink$`; 
  let url2 = `images/home-page/desktop/eyes-on-you-desktop-2x-${elem.slice(6)}.jpg?$staticlink$`; 

  document.getElementById(elem).srcset = `${url1}, ${url2}`;
  console.log("rollOut", document.getElementById(elem).srcset);
}
  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 rollOverCollectionA = document
      .getElementById("roll-over-collection-b")
      .getElementsByClassName("rollover");
    rollOverCollectionA = Array.prototype.slice.apply(rollOverCollectionA);
    console.log("rollOverCollectionA", rollOverCollectionA);
    var l = rollOverCollectionA.length;
    for (let i = 0; i < l; i++) {
      on("mouseover", "#" + rollOverCollectionA[i].id, function () {
        var srcObj = rollOverCollectionA[i].srcset.splice(174, 0, '-hover');
            srcObj.splice(362, 0, 'hover-')
        rollOver(rollOverCollectionA[i].id, srcObj);
      });
      on("mouseout", "#" + rollOverCollectionA[i].id, function () {
        // remove the hovers
        rollOut(rollOverCollectionA[i].id, rollOverCollectionA[i].srcset.replace('-hover', '').replace('hover-',''));
      });
    }
  });

<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$ 1x"
          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$ 1x"
          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>