Hotspot Responsive

Tutorial Hotspots

Das Skript habe ich mit drei neuen Versuchen über die KI "ChatGPT" erstellt. Es war etwas kompliziert, da ich zusätzlich eine Lightbox einbauen wollte.

Für den Einbau der Lightbox guckt bitte hier

Für einen alternativen Hotspot guckt auch hier

Das eigentliche Problem bei der Verwendung von Koordinaten der Pixelposition ist die Responsivität. Die Hotspots müssen auf jeder Displaygröße unverändert an der gleichen Stelle bleiben.

Dazu muss die Größe des Originalbildes im JavaScript angegeben werden. In meinem Beispiel hat das Bild eine Größe von 800px Breite und 533px Höhe. Das JavaScript berechnet dann diese Größe für die jeweils verwendete Displaygröße um.

Nachdem ihr die ursprüngliche Größe des Bildes im Skript eingetragen habt, kopiert ihr es in den Bereich "End of <body> code" in den Seiteneinstellungen.


                    <!-- JavaScript for responsive adjustment of all hotspots -->

                    <script>

                      function resizeMapAreas() {

                        const image = document.getElementById('responsive-image');

                        const originalWidth = 800; // Ursprüngliche Bildbreite

                        const originalHeight = 533; // Ursprüngliche Bildhöhe

                    

                        const widthRatio = image.clientWidth / originalWidth;

                        const heightRatio = image.clientHeight / originalHeight;

                    

                        const areas = document.getElementsByClassName('map-area');

                    

                        for (let area of areas) {

                          const coords = area.dataset.coords.split(',');

                          const x1 = Math.round(coords[0] * widthRatio);

                          const y1 = Math.round(coords[1] * heightRatio);

                          const x2 = Math.round(coords[2] * widthRatio);

                          const y2 = Math.round(coords[3] * heightRatio);

                    

                          area.style.left = x1 + 'px';

                          area.style.top = y1 + 'px';

                          area.style.width = (x2 - x1) + 'px';

                          area.style.height = (y2 - y1) + 'px';

                        }

                      }

                    

                      window.addEventListener('resize', resizeMapAreas);

                      window.addEventListener('load', resizeMapAreas);

                    </script>

Die Koordinaten für euer Bild könnt ihr zum Beispiel einfach über ein Fotobearbeitungsprogramm ermitteln. Das geht auch mit Windows "Paint", indem ihr die Lineale einschaltet und die Positionen dort ablest.

Ich habe also hier einen einfachen Textblock verwendet und das Bild über ein <img> Tag selbst eingebaut, damit ich erst gar keine Probleme mit irgendwelchen Mobirise- oder Bootstrap CSS Klassen bekommen kann. Den Code unten mit den <div> Bereichen, habe ich unter dem schließenden </p> Tag des Beispieltextes von Mobirise eingefügt.

Die ersten beiden Zahlen sind die x- und y-Koordinaten oben links, die zweiten beiden Zahlen die x- und y-Koordinaten unten rechts des Hotspots. Die Style-Angaben sind links und oben die Koordinaten und die Breite und Höhe errechnet man aus diesen.


                    <div class="map-container">

                      <img src="Desktop.jpg" alt="Beispielbild" class="responsive-image" id="responsive-image">

                      <div class="map-area" data-coords="260,300,525,440" style="left: 260px; top: 300px; width: 265px; height: 140px;" title="Hotspot 1">

                        <a href="https://example.com" target="_blank"></a>

                      </div>

                      <div class="map-area" data-coords="505,60,710,290" style="left: 505px; top: 60px; width: 205px; height: 230px;" title="Hotspot 2">

                        <a href="https://example.com" target="_blank"></a>

                      </div>

                    </div>

Die Links könnt ihr entsprechend anpassen oder auch entfernen.

Um beliebig viele zusätzliche Hotspots hinzuzufügen, kopiert ihr hier einen <div> Bereich </div> und tragt die neuen Koordinaten ein. So habe ich später noch den Hotspot der Tasse hinzugefügt, der im Beispiel-Code hier fehlt.

Zusätzlich habe ich der Darstellung des Bildes und der Hotspots noch etwas CSS hinzugefügt, das in den "Code Editor" im Bereich "CSS Editor" des verwendeten Blocks gehört.

Diese CSS-Klassen werden auch im JavaScript zur Berechnung der Position und Größe des Hotspots benötigt.

Wenn ihr also die farbige Anzeige der Hotspots entfernen wollt (border und background-color), müsst ihr dennoch die absolute Position der class="map-area" beibehalten.


                    .responsive-image {

                      width: 100%;

                      height: auto;

                      border-radius: 20px;

                    }

                    .map-container {

                      position: relative;

                      width: fit-content;

                      margin: auto;

                    }

                    .map-area {

                      position: absolute;

                      border: 1px solid red;

                      background-color: rgba(255, 0, 0, 0.1);

                    }

                    .map-area:hover {

                      background-color: transparent;

                    }

                    .map-area a {

                      display: block;

                      width: 100%;

                      height: 100%;

                      text-decoration: none;

                    }

Mobirise Tutorials

Hotspot Koordinaten

Hotspots responsive

Tutorial Hotspots