How to circumvent mutability when manipulating the DOM in JavaScript?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
2
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.
UPDATE II
This is what is happening now
javascript dom mouseover mouseout srcset
asked Nov 26 '18 at 23:16
Antonio Pavicevac-OrtizAntonio Pavicevac-Ortiz
1,58911750
|
show 5 more comments
2
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.
UPDATE II
This is what is happening now
javascript dom mouseover mouseout srcset
asked Nov 26 '18 at 23:16
Antonio Pavicevac-OrtizAntonio Pavicevac-Ortiz
1,58911750
It would be much easier to answer this question if we had the full code here on SO. You can use a Stack Snippet to reproduce the issue here. I do see that your CodePen has a reference to jQuery; it's not clear why you're reproducing a number of its functions in your code... Nothing wrong with it, just odd.
– Heretic Monkey
Nov 26 '18 at 23:27
@HereticMonkey I supplied the full code. And my codepen is not using jQuery. Thanks though!
– Antonio Pavicevac-Ortiz
Nov 26 '18 at 23:30
1
Well for one, on rollOut you are setting srcset to srcset -- which is already modified with the 'hover'. If you are trying to revert back, you could either replace it out, or store a copy of the original before mutation.
– jacob.mccrumb
Nov 27 '18 at 17:01
1
With regards "I WAS doing something like this orginally:" looks like you are not making a string "src, src" but a string "src" after which you have a string...
– jacob.mccrumb
Nov 27 '18 at 17:01
1
Added some samples below in answer
– jacob.mccrumb
Nov 27 '18 at 17:22
|
show 5 more comments
2
2
2
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.
UPDATE II
This is what is happening now
javascript dom mouseover mouseout srcset
asked Nov 26 '18 at 23:16
Antonio Pavicevac-OrtizAntonio Pavicevac-Ortiz
1,58911750
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.
UPDATE II
This is what is happening now
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>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>javascript dom mouseover mouseout srcset
javascript dom mouseover mouseout srcset
asked Nov 26 '18 at 23:16
Antonio Pavicevac-OrtizAntonio Pavicevac-Ortiz
1,58911750
asked Nov 26 '18 at 23:16
Antonio Pavicevac-OrtizAntonio Pavicevac-Ortiz
1,58911750
edited Nov 27 '18 at 19:55
Antonio Pavicevac-Ortiz
asked Nov 26 '18 at 23:16
Antonio Pavicevac-OrtizAntonio Pavicevac-Ortiz
1,58911750
asked Nov 26 '18 at 23:16
Antonio Pavicevac-OrtizAntonio Pavicevac-Ortiz
1,58911750
asked Nov 26 '18 at 23:16
Antonio Pavicevac-OrtizAntonio Pavicevac-Ortiz
1,58911750
1,58911750
It would be much easier to answer this question if we had the full code here on SO. You can use a Stack Snippet to reproduce the issue here. I do see that your CodePen has a reference to jQuery; it's not clear why you're reproducing a number of its functions in your code... Nothing wrong with it, just odd.
– Heretic Monkey
Nov 26 '18 at 23:27
@HereticMonkey I supplied the full code. And my codepen is not using jQuery. Thanks though!
– Antonio Pavicevac-Ortiz
Nov 26 '18 at 23:30
1
Well for one, on rollOut you are setting srcset to srcset -- which is already modified with the 'hover'. If you are trying to revert back, you could either replace it out, or store a copy of the original before mutation.
– jacob.mccrumb
Nov 27 '18 at 17:01
1
With regards "I WAS doing something like this orginally:" looks like you are not making a string "src, src" but a string "src" after which you have a string...
– jacob.mccrumb
Nov 27 '18 at 17:01
1
Added some samples below in answer
– jacob.mccrumb
Nov 27 '18 at 17:22
|
show 5 more comments
It would be much easier to answer this question if we had the full code here on SO. You can use a Stack Snippet to reproduce the issue here. I do see that your CodePen has a reference to jQuery; it's not clear why you're reproducing a number of its functions in your code... Nothing wrong with it, just odd.
– Heretic Monkey
Nov 26 '18 at 23:27
@HereticMonkey I supplied the full code. And my codepen is not using jQuery. Thanks though!
– Antonio Pavicevac-Ortiz
Nov 26 '18 at 23:30
1
Well for one, on rollOut you are setting srcset to srcset -- which is already modified with the 'hover'. If you are trying to revert back, you could either replace it out, or store a copy of the original before mutation.
– jacob.mccrumb
Nov 27 '18 at 17:01
1
With regards "I WAS doing something like this orginally:" looks like you are not making a string "src, src" but a string "src" after which you have a string...
– jacob.mccrumb
Nov 27 '18 at 17:01
1
Added some samples below in answer
– jacob.mccrumb
Nov 27 '18 at 17:22
It would be much easier to answer this question if we had the full code here on SO. You can use a Stack Snippet to reproduce the issue here. I do see that your CodePen has a reference to jQuery; it's not clear why you're reproducing a number of its functions in your code... Nothing wrong with it, just odd.
– Heretic Monkey
Nov 26 '18 at 23:27
It would be much easier to answer this question if we had the full code here on SO. You can use a Stack Snippet to reproduce the issue here. I do see that your CodePen has a reference to jQuery; it's not clear why you're reproducing a number of its functions in your code... Nothing wrong with it, just odd.
– Heretic Monkey
Nov 26 '18 at 23:27
@HereticMonkey I supplied the full code. And my codepen is not using jQuery. Thanks though!
– Antonio Pavicevac-Ortiz
Nov 26 '18 at 23:30
@HereticMonkey I supplied the full code. And my codepen is not using jQuery. Thanks though!
– Antonio Pavicevac-Ortiz
Nov 26 '18 at 23:30
1
1
Well for one, on rollOut you are setting srcset to srcset -- which is already modified with the 'hover'. If you are trying to revert back, you could either replace it out, or store a copy of the original before mutation.
– jacob.mccrumb
Nov 27 '18 at 17:01
Well for one, on rollOut you are setting srcset to srcset -- which is already modified with the 'hover'. If you are trying to revert back, you could either replace it out, or store a copy of the original before mutation.
– jacob.mccrumb
Nov 27 '18 at 17:01
1
1
With regards "I WAS doing something like this orginally:" looks like you are not making a string "src, src" but a string "src" after which you have a string...
– jacob.mccrumb
Nov 27 '18 at 17:01
With regards "I WAS doing something like this orginally:" looks like you are not making a string "src, src" but a string "src" after which you have a string...
– jacob.mccrumb
Nov 27 '18 at 17:01
1
1
Added some samples below in answer
– jacob.mccrumb
Nov 27 '18 at 17:22
Added some samples below in answer
– jacob.mccrumb
Nov 27 '18 at 17:22
|
show 5 more comments
1 Answer
1
active
oldest
votes
1
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>answered Nov 27 '18 at 17:22
jacob.mccrumbjacob.mccrumb
521317
Thank you! The above code worked!!! But only on the last image??!! I usedletin the loop so I don't know why that would be!
– Antonio Pavicevac-Ortiz
Nov 27 '18 at 17:30
I think the splice is off - use the code under "Alternatively" instead for rollOver and rollOut
– jacob.mccrumb
Nov 27 '18 at 18:05
Thanks but the "Alt" ver recreates the problem I had...
– Antonio Pavicevac-Ortiz
Nov 27 '18 at 18:20
The Alt version in my answer or in your question?
– jacob.mccrumb
Nov 27 '18 at 18:21
Your “alt” version.
– Antonio Pavicevac-Ortiz
Nov 27 '18 at 18:22
|
show 3 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53490529%2fhow-to-circumvent-mutability-when-manipulating-the-dom-in-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
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>answered Nov 27 '18 at 17:22
jacob.mccrumbjacob.mccrumb
521317
Thank you! The above code worked!!! But only on the last image??!! I usedletin the loop so I don't know why that would be!
– Antonio Pavicevac-Ortiz
Nov 27 '18 at 17:30
I think the splice is off - use the code under "Alternatively" instead for rollOver and rollOut
– jacob.mccrumb
Nov 27 '18 at 18:05
Thanks but the "Alt" ver recreates the problem I had...
– Antonio Pavicevac-Ortiz
Nov 27 '18 at 18:20
The Alt version in my answer or in your question?
– jacob.mccrumb
Nov 27 '18 at 18:21
Your “alt” version.
– Antonio Pavicevac-Ortiz
Nov 27 '18 at 18:22
|
show 3 more comments
1
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>answered Nov 27 '18 at 17:22
jacob.mccrumbjacob.mccrumb
521317
Thank you! The above code worked!!! But only on the last image??!! I usedletin the loop so I don't know why that would be!
– Antonio Pavicevac-Ortiz
Nov 27 '18 at 17:30
I think the splice is off - use the code under "Alternatively" instead for rollOver and rollOut
– jacob.mccrumb
Nov 27 '18 at 18:05
Thanks but the "Alt" ver recreates the problem I had...
– Antonio Pavicevac-Ortiz
Nov 27 '18 at 18:20
The Alt version in my answer or in your question?
– jacob.mccrumb
Nov 27 '18 at 18:21
Your “alt” version.
– Antonio Pavicevac-Ortiz
Nov 27 '18 at 18:22
|
show 3 more comments
1
1
1
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>answered Nov 27 '18 at 17:22
jacob.mccrumbjacob.mccrumb
521317
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>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>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>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>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>answered Nov 27 '18 at 17:22
jacob.mccrumbjacob.mccrumb
521317
edited Nov 27 '18 at 21:10
answered Nov 27 '18 at 17:22
jacob.mccrumbjacob.mccrumb
521317
answered Nov 27 '18 at 17:22
jacob.mccrumbjacob.mccrumb
521317
answered Nov 27 '18 at 17:22
jacob.mccrumbjacob.mccrumb
521317
521317
Thank you! The above code worked!!! But only on the last image??!! I usedletin the loop so I don't know why that would be!
– Antonio Pavicevac-Ortiz
Nov 27 '18 at 17:30
I think the splice is off - use the code under "Alternatively" instead for rollOver and rollOut
– jacob.mccrumb
Nov 27 '18 at 18:05
Thanks but the "Alt" ver recreates the problem I had...
– Antonio Pavicevac-Ortiz
Nov 27 '18 at 18:20
The Alt version in my answer or in your question?
– jacob.mccrumb
Nov 27 '18 at 18:21
Your “alt” version.
– Antonio Pavicevac-Ortiz
Nov 27 '18 at 18:22
|
show 3 more comments
Thank you! The above code worked!!! But only on the last image??!! I usedletin the loop so I don't know why that would be!
– Antonio Pavicevac-Ortiz
Nov 27 '18 at 17:30
I think the splice is off - use the code under "Alternatively" instead for rollOver and rollOut
– jacob.mccrumb
Nov 27 '18 at 18:05
Thanks but the "Alt" ver recreates the problem I had...
– Antonio Pavicevac-Ortiz
Nov 27 '18 at 18:20
The Alt version in my answer or in your question?
– jacob.mccrumb
Nov 27 '18 at 18:21
Your “alt” version.
– Antonio Pavicevac-Ortiz
Nov 27 '18 at 18:22
Thank you! The above code worked!!! But only on the last image??!! I used
let in the loop so I don't know why that would be!– Antonio Pavicevac-Ortiz
Nov 27 '18 at 17:30
Thank you! The above code worked!!! But only on the last image??!! I used
let in the loop so I don't know why that would be!– Antonio Pavicevac-Ortiz
Nov 27 '18 at 17:30
I think the splice is off - use the code under "Alternatively" instead for rollOver and rollOut
– jacob.mccrumb
Nov 27 '18 at 18:05
I think the splice is off - use the code under "Alternatively" instead for rollOver and rollOut
– jacob.mccrumb
Nov 27 '18 at 18:05
Thanks but the "Alt" ver recreates the problem I had...
– Antonio Pavicevac-Ortiz
Nov 27 '18 at 18:20
Thanks but the "Alt" ver recreates the problem I had...
– Antonio Pavicevac-Ortiz
Nov 27 '18 at 18:20
The Alt version in my answer or in your question?
– jacob.mccrumb
Nov 27 '18 at 18:21
The Alt version in my answer or in your question?
– jacob.mccrumb
Nov 27 '18 at 18:21
Your “alt” version.
– Antonio Pavicevac-Ortiz
Nov 27 '18 at 18:22
Your “alt” version.
– Antonio Pavicevac-Ortiz
Nov 27 '18 at 18:22
|
show 3 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53490529%2fhow-to-circumvent-mutability-when-manipulating-the-dom-in-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
It would be much easier to answer this question if we had the full code here on SO. You can use a Stack Snippet to reproduce the issue here. I do see that your CodePen has a reference to jQuery; it's not clear why you're reproducing a number of its functions in your code... Nothing wrong with it, just odd.
– Heretic Monkey
Nov 26 '18 at 23:27
@HereticMonkey I supplied the full code. And my codepen is not using jQuery. Thanks though!
– Antonio Pavicevac-Ortiz
Nov 26 '18 at 23:30
1
Well for one, on rollOut you are setting srcset to srcset -- which is already modified with the 'hover'. If you are trying to revert back, you could either replace it out, or store a copy of the original before mutation.
– jacob.mccrumb
Nov 27 '18 at 17:01
1
With regards "I WAS doing something like this orginally:" looks like you are not making a string "src, src" but a string "src" after which you have a string...
– jacob.mccrumb
Nov 27 '18 at 17:01
1
Added some samples below in answer
– jacob.mccrumb
Nov 27 '18 at 17:22