CTGY with front and back image

[kitdang]

Anyone has a quick tip on how I can add a 2nd image when I hover the product on the category page?

[Matt Zimmermann]

You could create a custom product field to hold the hover image and then use JavaScript to swap it on hover. Here's a very rough concept to get you started...I wouldn't recommend using this code in production.

<img class="x-product-list__image" data-orig="&mvte:product:imagetypes:main;" data-hover="&mvt:product:customfield_values:customfields:hover_image;" src="&mvte:product:imagetypes:main;" alt="&mvte:product:name;" onmouseenter="this.src = this.getAttribute('data-hover');" onmouseleave="this.src = this.getAttribute('data-orig');">

[kitdang]

Thanks Matt.

I already have the back image (image 2) in our image machine so we don't need a custom field. Also, i seen other Miva site using css instead of javascript. is there a prefer preference?

Sorry, regards to your code i am not sure what to do next. Is there a sample or a documentation you have in mind that you can point me to?

[Matt Zimmermann]

Unfortunately, I do not. This was just something off the top of my head.

[kitdang]

Hi Matt,

After some browsing, I think I understand your recommendation. I thought i need to write a custom javascript but it looks like it's a built in function. However, is it safe to use the on mouse event now? I remember reading a while back to stick with css vs javascript. Not sure if it's still an issue. I went to w3schools.com (see below) and it looks like it's supported by all browsers. Any thoughts on this?

https://www.w3schools.com/jsref/event_onmouseover.asp

[lesliekirk]

I'm going to tag along with this thread. I have a need for this and the Quick View function too.

[kitdang]

Bringing this back to see if anyone has any idea on accomplishing this.

[Matt Zimmermann]

The same process would probably still hold. You would be using a "hover" event to trigger the flipping transition to show the second image. If you wanted to use just CSS, you could try something like this [ https://sirv.com/help/articles/hover-change-image/ ]. If you wanted to use JavaScript, you could change the source of the image on mosuseover and revert it on mouseout.

[William Davis]

Hmm, I've always liked that feature, but I don't know how useful it would be today since most people shop on either tablets and/or mobile devices.

Have you done any resent research (e.g.: Baymard Institute, great resource) on the practically/conversion on such feature vs tradeoffs such as page speed? If might be a good idea to look into the matter, before implementing same.

If you end up doing any kind of research, could you please report back your findings? If you implement same, could you please share how it was implemented?