javascript - 在 JavaScript 中操作 DOM 时如何规避可变性？

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>

这是一个有效的 prototype .然而，当我尝试获取 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。我相信我走在正确的轨道上，因为翻转一次就可以了。但是现在我改变了字符串，它只是一遍又一遍地添加“悬停”!

提前致谢!

更新:

认为这张快照可能会有所帮助，因为它传达了我试图解释的正在发生的事情。

更新二

现在是这样

Answer 1

下面使用replace来去掉-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>

UPDATE 添加带 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>