Fix interactive image on mobile

Author: bertaveira

_includes/interactive_image.html

@@ -125,14 +125,13 @@
                 }
             });
 
-            // Basic touch support: tap and hold shows clickImg, release shows defaultImg
+            // Basic touch support: tap and hold shows hoverImg, release shows defaultImg
             // This is a simplified interaction for touch.
-            let touchTimeout;
             container.addEventListener('touchstart', (event) => {
                 event.preventDefault(); // Important to prevent scrolling while interacting
                 isMouseDown = true; // Use same flag for conceptual "pressed" state
-                if (hoverImg) hoverImg.style.opacity = '0'; // No hover on touch usually
-                if (clickImg) clickImg.style.opacity = '1';
+                if (hoverImg) hoverImg.style.opacity = '1';
+                if (clickImg) clickImg.style.opacity = '0';
             }, { passive: false }); // Need passive:false for preventDefault to work on touchstart
 
             container.addEventListener('touchend', () => {

_sass/interactive_image.scss

@@ -39,6 +39,8 @@
     display: inline-block; // Or 'block' if you want it to take full width
     cursor: pointer; // Indicate it's interactive
     line-height: 0; // Prevent extra space below inline-block images if any
+    -webkit-touch-callout: none; // iOS Safari
+    user-select: none; // Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox
 
     // Ensure the container takes the size of the default image
     // and other images overlay it.