Search code examples
javascriptdommouseovermouseoutsrcset

How to circumvent mutability when manipulating the DOM in JavaScript?

I am creating a function which loops through the images and applies rollover functionality.

This is the code:

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>

And here is a working prototype. The environment I am working in however seems to be creating problems when I try to get the srcset attribute. To get around that I figured I get a snap shot of the srcset and pass it into the rollOver function.

Excerpt from above.

  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);
      });
    }
  });

Here are the rollOver and rollOut functions

  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;
 }

I WAS doing something like this orginally:

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";
}

Essentially using a string and when applying a slice to the the id in the rollover functions rather than in the loop. I believe I am on the right track, as the rollover works once. But what happens is now that I mutated the string, it just keeps adding 'hover' over and over again!

Thanks in advance!

Update:

Think this snapshot might help as it conveys what I am trying to explain is happening.

enter image description here

UPDATE II

This is what is happening now

enter image description here

Solution

  • The below uses replace to remove the spliced in -hover and 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 Add snippet with alt, updated to use template literals

    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>