Hover Over Images not preloading

[bluetroop2]

Hi X Team,

Look at this home page…
http://crystals.bluetroop.com

I’ve placed four Services roll-over images on the home page (see my screenshot). When I first bring up the page in a browser, they will not show (or preload), until you hover over them. Please look at the JS code I used (recommended for roll-overs by the X Team a while back). What can I do to correct this problem?

More information to come…

[marc_a]

@bluetroop2,

I found out that the 4 images on the front page are not available on your website when I check the Google Console, it is returning 404. I suggest that you will fix the image src and please note that providing custom code is outside the scope of our theme support. Issues that will arise from the use of custom codes should be forwarded to a 3rd party developer. I hope you understand this matter.

Thank you.

[bluetroop2]

Now I got the images to show up, but the Permanent Makeup box won’t go back to it’s original “hover off state”. Can you please double check the JS that the X Team provided me from a different project that I’m using on this project? Help!..

jQuery(“a.x-img.lash img”).hover(function( ){
jQuery(this).attr(“src”,"/wp-content/uploads/2020/06/featureLashOn2.jpg");
},function(){
jQuery(this).attr(“src”,"/wp-content/uploads/2020/06/featureLashOff2.jpg");

});

jQuery(“a.x-img.skincare img”).hover(function( ){
jQuery(this).attr(“src”,"/wp-content/uploads/2020/06/featureSkinCareOn2.jpg");
},function(){
jQuery(this).attr(“src”,"/wp-content/uploads/2020/06/featureSkinCareOff2.jpg");

});

jQuery(“a.x-img.makeup img”).hover(function( ){
jQuery(this).attr(“src”,"/wp-content/uploads/2020/06/featureMakeupOn2.jpg");
},function(){
jQuery(this).attr(“src”,"/wp-content/uploads/2020/06/featureMakeupOn2.jpg");

});

jQuery(“a.x-img.tanning img”).hover(function( ){
jQuery(this).attr(“src”,"/wp-content/uploads/2020/06/featureTanningOn2.jpg");
},function(){
jQuery(this).attr(“src”,"/wp-content/uploads/2020/06/featureTanningOff2.jpg");

});

[marc_a]

@bluetroop2,

I just checked your JS code and the only problem on the Permanent Makeup box JS code is that the image path are just the same.

It should be like this:

jQuery("a.x-img.makeup img").hover(function( ){
jQuery(this).attr("src","/wp-content/uploads/2020/06/featureMakeupOn2.jpg");
},function(){
jQuery(this).attr("src","/wp-content/uploads/2020/06/featureMakeupOff2.jpg");
});

"Please note that providing custom code is outside the scope of our theme support. Issues that will arise from the use of custom codes should be forwarded to a 3rd party developer."

Thank you.

[bluetroop2]

OMG, that was a simple fix, sorry. Thank you for your help. You went above and beyond the call of duty! That’s why I always choose X Theme for my projects. The support is great. Thanks again.

[marc_a]

@bluetroop2,

It’s our pleasure to help you.

Thank you.