Draggable Image Map<\/title>\r\n <style>\r\n body {\r\n margin: 0;\r\n overflow: hidden;\r\n }\r\n #container {\r\n width: 100%;\r\n height: 100vh;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n #image {\r\n position: absolute;\r\n cursor: grab;\r\n user-drag: none;\r\n user-select: none;\r\n aspect-ratio: 16\/9;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"container\">\r\n <img decoding=\"async\" id=\"image\" src=\"https:\/\/remember360.de\/wp-content\/uploads\/2023\/08\/mountains-7779007-1024x683.jpg\" alt=\"Map Image\">\r\n <\/div>\r\n\r\n <script>\r\n const image = document.getElementById(\"image\");\r\n const container = document.getElementById(\"container\");\r\n\r\n \/\/ Viewport size (aspect ratio: 16:9)\r\n const viewportWidth = 400;\r\n const viewportHeight = 225;\r\n\r\n \/\/ Image size (keep the same aspect ratio)\r\n const imageWidth = 1024;\r\n const imageHeight = 683;\r\n\r\n \/\/ Calculate the maximum allowed scrolling from the center of the image\r\n const maxScrollX = (imageWidth - viewportWidth) \/ 2;\r\n const maxScrollY = (imageHeight - viewportHeight) \/ 2;\r\n\r\n \/\/ Set initial offsetX and offsetY to center the image\r\n const initialOffsetX = maxScrollX;\r\n const initialOffsetY = maxScrollY;\r\n let offsetX = initialOffsetX;\r\n let offsetY = initialOffsetY;\r\n\r\n \/\/ Additional manual offsets\r\n let manualOffsetX = 0;\r\n let manualOffsetY = -500;\r\n\r\n updateImageTransform();\r\n\r\n let isDragging = false;\r\n let startX, startY;\r\n\r\n function startDrag(e) {\r\n isDragging = true;\r\n startX = e.clientX;\r\n startY = e.clientY;\r\n image.style.cursor = \"grabbing\";\r\n e.preventDefault(); \/\/ Prevent cursor drag copy behavior\r\n }\r\n\r\n function drag(e) {\r\n if (!isDragging) return;\r\n const currentX = e.clientX;\r\n const currentY = e.clientY;\r\n const deltaX = currentX - startX;\r\n const deltaY = currentY - startY;\r\n\r\n \/\/ Calculate the new offsets, considering the manual offset\r\n let newOffsetX = offsetX + deltaX + manualOffsetX;\r\n let newOffsetY = offsetY + deltaY + manualOffsetY;\r\n\r\n \/\/ Apply the maximum allowed scrolling from the center of the image\r\n newOffsetX = clamp(newOffsetX, initialOffsetX - maxScrollX, initialOffsetX + maxScrollX);\r\n newOffsetY = clamp(newOffsetY, initialOffsetY - maxScrollY, initialOffsetY + maxScrollY);\r\n\r\n \/\/ Update the image position\r\n offsetX = newOffsetX;\r\n offsetY = newOffsetY;\r\n updateImageTransform();\r\n\r\n startX = currentX;\r\n startY = currentY;\r\n }\r\n\r\n function stopDrag() {\r\n isDragging = false;\r\n image.style.cursor = \"grab\";\r\n }\r\n\r\n function updateImageTransform() {\r\n const scaleX = imageWidth \/ viewportWidth;\r\n const scaleY = imageHeight \/ viewportHeight;\r\n image.style.transform = `translate(${-offsetX}px, ${-offsetY}px) scale(${scaleX}, ${scaleY})`;\r\n }\r\n\r\n function clamp(value, min, max) {\r\n return Math.max(Math.min(value, max), min);\r\n }\r\n\r\n window.addEventListener(\"mousedown\", startDrag);\r\n window.addEventListener(\"mousemove\", drag);\r\n window.addEventListener(\"mouseup\", stopDrag);\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Draggable Image Map<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"","footnotes":""},"_links":{"self":[{"href":"https:\/\/remember360.de\/index.php?rest_route=\/wp\/v2\/pages\/1849"}],"collection":[{"href":"https:\/\/remember360.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/remember360.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/remember360.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/remember360.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1849"}],"version-history":[{"count":61,"href":"https:\/\/remember360.de\/index.php?rest_route=\/wp\/v2\/pages\/1849\/revisions"}],"predecessor-version":[{"id":1955,"href":"https:\/\/remember360.de\/index.php?rest_route=\/wp\/v2\/pages\/1849\/revisions\/1955"}],"wp:attachment":[{"href":"https:\/\/remember360.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1849"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\r\n\r\n\r\n \r\n \r\n Draggable Image Map<\/title>\r\n <style>\r\n body {\r\n margin: 0;\r\n overflow: hidden;\r\n }\r\n #container {\r\n width: 100%;\r\n height: 100vh;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n #image {\r\n position: absolute;\r\n cursor: grab;\r\n user-drag: none;\r\n user-select: none;\r\n aspect-ratio: 16\/9;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"container\">\r\n <img decoding=\"async\" id=\"image\" src=\"https:\/\/remember360.de\/wp-content\/uploads\/2023\/08\/mountains-7779007-1024x683.jpg\" alt=\"Map Image\">\r\n <\/div>\r\n\r\n <script>\r\n const image = document.getElementById(\"image\");\r\n const container = document.getElementById(\"container\");\r\n\r\n \/\/ Viewport size (aspect ratio: 16:9)\r\n const viewportWidth = 400;\r\n const viewportHeight = 225;\r\n\r\n \/\/ Image size (keep the same aspect ratio)\r\n const imageWidth = 1024;\r\n const imageHeight = 683;\r\n\r\n \/\/ Calculate the maximum allowed scrolling from the center of the image\r\n const maxScrollX = (imageWidth - viewportWidth) \/ 2;\r\n const maxScrollY = (imageHeight - viewportHeight) \/ 2;\r\n\r\n \/\/ Set initial offsetX and offsetY to center the image\r\n const initialOffsetX = maxScrollX;\r\n const initialOffsetY = maxScrollY;\r\n let offsetX = initialOffsetX;\r\n let offsetY = initialOffsetY;\r\n\r\n \/\/ Additional manual offsets\r\n let manualOffsetX = 0;\r\n let manualOffsetY = -500;\r\n\r\n updateImageTransform();\r\n\r\n let isDragging = false;\r\n let startX, startY;\r\n\r\n function startDrag(e) {\r\n isDragging = true;\r\n startX = e.clientX;\r\n startY = e.clientY;\r\n image.style.cursor = \"grabbing\";\r\n e.preventDefault(); \/\/ Prevent cursor drag copy behavior\r\n }\r\n\r\n function drag(e) {\r\n if (!isDragging) return;\r\n const currentX = e.clientX;\r\n const currentY = e.clientY;\r\n const deltaX = currentX - startX;\r\n const deltaY = currentY - startY;\r\n\r\n \/\/ Calculate the new offsets, considering the manual offset\r\n let newOffsetX = offsetX + deltaX + manualOffsetX;\r\n let newOffsetY = offsetY + deltaY + manualOffsetY;\r\n\r\n \/\/ Apply the maximum allowed scrolling from the center of the image\r\n newOffsetX = clamp(newOffsetX, initialOffsetX - maxScrollX, initialOffsetX + maxScrollX);\r\n newOffsetY = clamp(newOffsetY, initialOffsetY - maxScrollY, initialOffsetY + maxScrollY);\r\n\r\n \/\/ Update the image position\r\n offsetX = newOffsetX;\r\n offsetY = newOffsetY;\r\n updateImageTransform();\r\n\r\n startX = currentX;\r\n startY = currentY;\r\n }\r\n\r\n function stopDrag() {\r\n isDragging = false;\r\n image.style.cursor = \"grab\";\r\n }\r\n\r\n function updateImageTransform() {\r\n const scaleX = imageWidth \/ viewportWidth;\r\n const scaleY = imageHeight \/ viewportHeight;\r\n image.style.transform = `translate(${-offsetX}px, ${-offsetY}px) scale(${scaleX}, ${scaleY})`;\r\n }\r\n\r\n function clamp(value, min, max) {\r\n return Math.max(Math.min(value, max), min);\r\n }\r\n\r\n window.addEventListener(\"mousedown\", startDrag);\r\n window.addEventListener(\"mousemove\", drag);\r\n window.addEventListener(\"mouseup\", stopDrag);\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Draggable Image Map<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"","footnotes":""},"_links":{"self":[{"href":"https:\/\/remember360.de\/index.php?rest_route=\/wp\/v2\/pages\/1849"}],"collection":[{"href":"https:\/\/remember360.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/remember360.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/remember360.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/remember360.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1849"}],"version-history":[{"count":61,"href":"https:\/\/remember360.de\/index.php?rest_route=\/wp\/v2\/pages\/1849\/revisions"}],"predecessor-version":[{"id":1955,"href":"https:\/\/remember360.de\/index.php?rest_route=\/wp\/v2\/pages\/1849\/revisions\/1955"}],"wp:attachment":[{"href":"https:\/\/remember360.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1849"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}