In this thread, I will guide you how to make a part of image clickable, we will use Image Hotspot Plugin + Extra JS code.
#1. First, you need to install Image Hotspot Plugin
(Follow Step 1 & Step 2 in Plugin Documentation Page)
#2. Note: In step 2, after click a position on image > Enter text: View Detail in Description > Click Link icon to add URL
Enter your desired url
#3. Next, use this code to under Plugin code in Code Injection
<!-- Image Hotspots clickable @tuanphan 29-09-2025 -->
<script>document.addEventListener('DOMContentLoaded',function(){function setupDotClickHandlers(){const dots=document.querySelectorAll('.image-hotspot-dot');dots.forEach(dot=>{if(dot.dataset.clickHandlerAdded)return;dot.addEventListener('click',function(e){if(!dot._tippy)return;const tippyContent=dot._tippy.popper.querySelector('.image-hotspot-tooltip');if(!tippyContent)return;const link=tippyContent.querySelector('a[href]');if(link&&link.href){e.preventDefault();e.stopPropagation();window.open(link.href,'_blank')}});dot.style.cursor='pointer';dot.dataset.clickHandlerAdded='true'})}
setupDotClickHandlers();const observer=new MutationObserver(function(mutations){setupDotClickHandlers()});observer.observe(document.body,{childList:!0,subtree:!0});if(window.ImageHotspots){const originalRefresh=window.ImageHotspots.refresh;window.ImageHotspots.refresh=function(){originalRefresh();setTimeout(setupDotClickHandlers,100)}}});</script>
