Map zeichnen in Mobirise

Mit dem Wert (value) eines Options-Feldes alleine, kannst Du keine URL aufrufen.

Da braucht man noch ein Script.

https://stackoverflow.com/questions/124 ... t-dropdown

Responsiver Hotspot

Es war eine enorme Herausforderung, das Skript genau nach meinen Vorstellungen zu erstellen.

Da ich keine passende Vorlage finden konnte, habe ich es mithilfe der KI "ChatGPT" in mehreren Anläufen eigenständig entwickelt.

Zusätzlich habe ich noch die "Lightbox 2" integriert:

https://www.mobirise-tutorials.com/Tuto ... tspot.html

Super Arbeit Tommy !

Aber ich verzichte jetzt auf eine Map und mach es ganz ordinär mit einem Auswahl Menü

https://fotoschulungen.com/plan/

Erstmal

Habe gerade kein Projekt, wo ich das mal sinnvoll einsetzen könnte.
Ist aber mal wieder eine klasse Sache von Dir!

Ja, ich finde das auch ziemlich gut. Dank der KI, denn mit JavaScript kenne ich mich nicht so gut aus, um so etwas zu erstellen.

Ich glaube, es gibt kein Skript, das die KI nicht in Sekunden schreiben könnte.

Hinzu kommt, dass es dieses Skript noch nirgendwo gibt, da ChatGPT es genau nach meinen Angaben erstellt hat. Mit drei Nachbesserungen, was extrem gut funktioniert, wenn man jedem Skript ein eigenes Thema bei der KI zuweist.

Dann kann man es auch noch nach Jahren nachbessern lassen.

Ich frage mich gerade, wem eigentlich die Urheberrechte an einem solchen Skript zustehen.

P.S.:

ich suche mal meine vier Fragen raus und poste diese hier. Ich finde es schlichtweg faszinierend

Meine Korrespondenz mit der KI "ChatGPT"

... für diese Anwendung der responsiven Hotspots. Nicht mehr und nicht weniger.

Tommy:

Ich möchte ein Bild mit Hotspots erstellen, also das HTML map Tag anwenden. Dieses sollte aber auch responsive für kleinere Displays sein. Kannst Du eine Beispiel-HTML erstellen?

ChatGPT:

Natürlich! Um ein Bild mit Hotspots zu erstellen, das auch auf verschiedenen Bildschirmgrößen responsiv ist, können wir das <map>-Tag zusammen mit CSS und etwas JavaScript verwenden. Hier ist ein Beispiel-HTML, das dies zeigt:

Code: Alles auswählen

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bild mit Hotspots</title>
    <style>
        .responsive-image {
            width: 100%;
            height: auto;
        }
        .map-container {
            position: relative;
        }
        .map-area {
            position: absolute;
            border: 2px solid red; /* Nur zur Visualisierung */
            cursor: pointer;
        }
    </style>
</head>
<body>

<div class="map-container">
    <img src="bild.jpg" alt="Beispielbild" usemap="#image-map" class="responsive-image" id="responsive-image">
    <map name="image-map" id="image-map">
        <area shape="rect" coords="34,44,270,350" href="https://example.com" alt="Hotspot 1">
        <area shape="rect" coords="290,172,333,250" href="https://example.com" alt="Hotspot 2">
    </map>
</div>

<script>
    function resizeMapAreas() {
        const image = document.getElementById('responsive-image');
        const imageMap = document.getElementById('image-map');
        const originalWidth = 800; // Ursprüngliche Bildbreite
        const originalHeight = 600; // Ursprüngliche Bildhöhe

        const widthRatio = image.width / originalWidth;
        const heightRatio = image.height / originalHeight;

        const areas = imageMap.getElementsByTagName('area');

        for (let area of areas) {
            const coords = area.dataset.coords.split(',');
            const newCoords = coords.map((coord, index) => {
                return index % 2 === 0
                    ? Math.round(coord * widthRatio)
                    : Math.round(coord * heightRatio);
            });
            area.coords = newCoords.join(',');
        }
    }

    window.addEventListener('resize', resizeMapAreas);
    window.addEventListener('load', resizeMapAreas);
</script>

</body>
</html>

Erklärung:
HTML-Struktur:
Ein <div>-Container (.map-container) enthält das Bild und die Map (<map>).
Das Bild verwendet das Attribut usemap zum Verknüpfen mit der Map.
Die Map enthält zwei <area>-Elemente, die jeweils einen Hotspot definieren.

CSS:
Das Bild wird durch die Klasse .responsive-image responsiv gemacht.
.map-container und .map-area ermöglichen die Positionierung und Visualisierung der Hotspots.

JavaScript:
Die Funktion resizeMapAreas passt die Koordinaten der Hotspots an, wenn das Fenster geändert wird oder die Seite geladen wird.
Das Verhältnis der Bildgröße wird berechnet und die Koordinaten der Hotspots werden entsprechend skaliert.

Hinweis:
Ersetze bild.jpg mit dem tatsächlichen Pfad zu deinem Bild.
Passe originalWidth und originalHeight an die Originalabmessungen deines Bildes an.
Die Hotspot-Koordinaten in coords sollten auf die Originalbildgröße bezogen sein.
Dieses Beispiel sorgt dafür, dass die Hotspots immer die richtige Position auf dem Bild beibehalten, unabhängig von der Bildschirmgröße oder der Größe des Browserfensters.

Tommy:

Die class="map-area" wird nicht angezeigt

ChatGPT:

Das stimmt, die .map-area-Klasse in meiner ersten Antwort wird nicht verwendet. Die <area>-Elemente sind tatsächlich unsichtbar und interaktiv. Sie können nicht direkt über CSS gestylt werden, da sie Teil des <map>-Elements sind.
Wenn du eine sichtbare Darstellung der Hotspots haben möchtest, kannst du diese mit absolut positionierten <div>-Elementen innerhalb des Containers erstellen. Hier ist eine aktualisierte Version des HTML, die diese Methode verwendet:

Code: Alles auswählen

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bild mit Hotspots</title>
    <style>
        .responsive-image {
            width: 100%;
            height: auto;
        }
        .map-container {
            position: relative;
            width: fit-content;
            margin: auto;
        }
        .map-area {
            position: absolute;
            border: 2px solid red; /* Sichtbare Hotspot-Grenze */
            cursor: pointer;
            background-color: rgba(255, 0, 0, 0.2); /* Halbtransparenter Hintergrund */
        }
    </style>
</head>
<body>

<div class="map-container">
    <img src="bild.jpg" alt="Beispielbild" class="responsive-image" id="responsive-image">
    <div class="map-area" data-coords="34,44,270,350" style="left: 34px; top: 44px; width: 236px; height: 306px;" onclick="window.location='https://example.com'"></div>
    <div class="map-area" data-coords="290,172,333,250" style="left: 290px; top: 172px; width: 43px; height: 78px;" onclick="window.location='https://example.com'"></div>
</div>

<script>
    function resizeMapAreas() {
        const image = document.getElementById('responsive-image');
        const originalWidth = 800; // Ursprüngliche Bildbreite
        const originalHeight = 600; // 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>

</body>
</html>

Erklärung:
HTML-Struktur:
Ein <div>-Container (.map-container) enthält das Bild und die Hotspots (<div>-Elemente mit der Klasse .map-area).
Die data-coords-Attribute der Hotspots enthalten die ursprünglichen Koordinaten.

CSS:
.map-area-Elemente sind sichtbar und absolut positioniert innerhalb des Containers.
Die .map-container-Klasse stellt sicher, dass der Container die Größe des Bildes einnimmt.

JavaScript:
Die resizeMapAreas-Funktion passt die Position und Größe der Hotspots an, wenn das Fenster geändert wird oder die Seite geladen wird.
Die Koordinaten der Hotspots werden aus den data-coords-Attributen entnommen und entsprechend der aktuellen Bildgröße skaliert.

Mit diesem Ansatz werden die Hotspots sichtbar und ihre Position wird korrekt skaliert, sodass sie auf verschiedenen Bildschirmgrößen immer über dem entsprechenden Teil des Bildes liegen.

Tommy:

Kannst Du anstelle von window.location ein a href anwenden

ChatGPT:

Natürlich! Hier ist die angepasste Version, bei der die Hotspots als <a>-Elemente verwendet werden. Die <a>-Elemente werden innerhalb der absolut positionierten <div>-Elemente platziert, um die Links zu realisieren:

Code: Alles auswählen

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bild mit Hotspots</title>
    <style>
        .responsive-image {
            width: 100%;
            height: auto;
        }
        .map-container {
            position: relative;
            width: fit-content;
            margin: auto;
        }
        .map-area {
            position: absolute;
            border: 2px solid red; /* Sichtbare Hotspot-Grenze */
            background-color: rgba(255, 0, 0, 0.2); /* Halbtransparenter Hintergrund */
        }
        .map-area a {
            display: block;
            width: 100%;
            height: 100%;
            text-decoration: none;
        }
    </style>
</head>
<body>

<div class="map-container">
    <img src="bild.jpg" alt="Beispielbild" class="responsive-image" id="responsive-image">
    <div class="map-area" data-coords="34,44,270,350" style="left: 34px; top: 44px; width: 236px; height: 306px;">
        <a href="https://example.com" target="_blank"></a>
    </div>
    <div class="map-area" data-coords="290,172,333,250" style="left: 290px; top: 172px; width: 43px; height: 78px;">
        <a href="https://example.com" target="_blank"></a>
    </div>
</div>

<script>
    function resizeMapAreas() {
        const image = document.getElementById('responsive-image');
        const originalWidth = 800; // Ursprüngliche Bildbreite
        const originalHeight = 600; // 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>

</body>
</html>

Erklärung:

HTML-Struktur:
Die Hotspots sind <div>-Elemente mit der Klasse .map-area, die jeweils ein <a>-Element enthalten.
Die data-coords-Attribute der Hotspots enthalten die ursprünglichen Koordinaten.
Die <a>-Elemente verlinken zu den gewünschten URLs.

CSS:
.map-area-Elemente sind sichtbar und absolut positioniert innerhalb des Containers.
Das <a>-Element in .map-area füllt den gesamten Bereich aus und ermöglicht das Anklicken.

JavaScript:
Die resizeMapAreas-Funktion passt die Position und Größe der Hotspots an, wenn das Fenster geändert wird oder die Seite geladen wird.
Die Koordinaten der Hotspots werden aus den data-coords-Attributen entnommen und entsprechend der aktuellen Bildgröße skaliert.

Mit dieser Methode kannst du sicherstellen, dass die Hotspots korrekt positioniert sind und die Links korrekt funktionieren, auch wenn das Bild auf verschiedenen Bildschirmgrößen skaliert wird.

Tommy:

Kannst Du bitte das Skript noch von 2 Hotspots auf 4 Hotspots erweitern.

ChatGPT:

Natürlich! Hier ist die angepasste Version des HTML-Codes mit vier Hotspots:

Code: Alles auswählen

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bild mit Hotspots</title>
    <style>
        .responsive-image {
            width: 100%;
            height: auto;
        }
        .map-container {
            position: relative;
            width: fit-content;
            margin: auto;
        }
        .map-area {
            position: absolute;
            border: 2px solid red; /* Sichtbare Hotspot-Grenze */
            background-color: rgba(255, 0, 0, 0.2); /* Halbtransparenter Hintergrund */
        }
        .map-area a {
            display: block;
            width: 100%;
            height: 100%;
            text-decoration: none;
        }
    </style>
</head>
<body>

<div class="map-container">
    <img src="bild.jpg" alt="Beispielbild" class="responsive-image" id="responsive-image">
    <div class="map-area" data-coords="34,44,270,350" style="left: 34px; top: 44px; width: 236px; height: 306px;">
        <a href="https://example.com/1" target="_blank"></a>
    </div>
    <div class="map-area" data-coords="290,172,333,250" style="left: 290px; top: 172px; width: 43px; height: 78px;">
        <a href="https://example.com/2" target="_blank"></a>
    </div>
    <div class="map-area" data-coords="400,200,500,300" style="left: 400px; top: 200px; width: 100px; height: 100px;">
        <a href="https://example.com/3" target="_blank"></a>
    </div>
    <div class="map-area" data-coords="550,100,600,200" style="left: 550px; top: 100px; width: 50px; height: 100px;">
        <a href="https://example.com/4" target="_blank"></a>
    </div>
</div>

<script>
    function resizeMapAreas() {
        const image = document.getElementById('responsive-image');
        const originalWidth = 800; // Ursprüngliche Bildbreite
        const originalHeight = 600; // 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>

</body>
</html>

Erklärung der Änderungen:

HTML-Struktur:
Zwei zusätzliche <div>-Elemente mit der Klasse .map-area wurden hinzugefügt, um die zusätzlichen Hotspots darzustellen.
Jedes neue .map-area-Element hat ein <a>-Element, das auf unterschiedliche URLs verweist.

CSS:
Es sind keine Änderungen am CSS erforderlich, da die bestehenden Stile für die zusätzlichen Hotspots übernommen werden.

JavaScript:
Das JavaScript bleibt unverändert, da die Funktion resizeMapAreas alle .map-area-Elemente automatisch anpasst.

Mit dieser erweiterten Version hast du nun vier Hotspots, die korrekt positioniert und skaliert werden, wenn das Bild auf verschiedenen Bildschirmgrößen angezeigt wird.

Mobirise-Tutorials.com

Map zeichnen in Mobirise

Re: Map zeichnen in Mobirise

Re: Map zeichnen in Mobirise

Re: Map zeichnen in Mobirise

Re: Map zeichnen in Mobirise

Re: Map zeichnen in Mobirise

Re: Map zeichnen in Mobirise

Wer ist online?