* add red dot

Author: h2Entwicklung

public/index.html

@@ -73,8 +73,8 @@ <h2 class="text-center mb-4">LookyLooky</h2>
         <div id="slideShowContainer" class="d-none">
             <div id="slideshow">
                 <div id="navigator"></div>
+ <img id="mainImage" src="" alt="Start your slideshow by Uploading your first PDF" class="img-fluid card">
 
-                    <img id="mainImage" src="" alt="Start your slideshow by Uploading your first PDF" class="img-fluid card">
 
 
                 <hr>

src/startSlideshow.mjs

@@ -81,11 +81,18 @@ export async function loadSlideshow(id) {
 
 }
 
+
+// Funktion zur Erfassung der Mausposition über dem Bild
 function trackMousePosition(event) {
     if (docId) {
         const rect = mainImage.getBoundingClientRect();
-        const xPercent = ((event.clientX - rect.left) / rect.width) * 100;
-        const yPercent = ((event.clientY - rect.top) / rect.height) * 100;
+        const computedStyle = window.getComputedStyle(mainImage);
+        const paddingLeft = parseFloat(computedStyle.paddingLeft);
+        const paddingTop = parseFloat(computedStyle.paddingTop);
+        const paddingRight = parseFloat(computedStyle.paddingRight);
+        const paddingBottom = parseFloat(computedStyle.paddingBottom);
+        const xPercent = ((event.clientX - rect.left - paddingLeft) / (rect.width-paddingLeft-paddingRight)) * 100;
+        const yPercent = ((event.clientY - rect.top - paddingTop) / (rect.height-paddingTop-paddingBottom)) * 100;
 
         socket.emit("mouseMove", {docId: docId, x: xPercent, y: yPercent});
     }