Map zeichnen in Mobirise

[Volker]

Hallo,
ich weiß nicht ob Ihr versteht was ich suche

Ich konnte früher in Dreamweaver ein Bild einfügen und dort Maps drauf zeichnen, die ich verlinken konnte.
Also Hotspots erstellen hieß das.

Wie mache ich sowas in Mobirise? Ist das überhaupt möglich ?

[Tommy Herrmann]

Moin,

ein "Hotspot" ist ja eigentlich nur eine Link-Anker. Das Problem besteht bei responsiven Seiten darin, dass sich die Position ändert.

Ich hatte das mal vor einigen Jahren erstellt (müsste ich mich aber selbst auch erst wieder einarbeiten):

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

Ich denke, das ist was Du meinst.

[Volker]

Genau das meine ich.
Ich brauch das für einen Platzplan, auf den man jeden Stellplatz anklicken kann und dann öffnet sich der jeweilige Kalender.
Und dann auch noch in einem Frame das die Inhalte ändert Wie das geht weiß ich wenigstens

[Volker]

Zur Not mach ich das eben mit Dreamweaver und binde es als HTML ein. Wäre Plan B

Hier meine Version:

https://fotoschulungen.com/plan/

Nur Platz 21 und 22 aktiv

So gerne in Mobirise

[Tommy Herrmann]

Ja - das wäre dann meine Seite.

Das HTML <map> Tag ist im Grunde dafür gedacht. Dort bilden die <area> Tags dann die Hotspots über Koordinaten:

https://www.w3schools.com/tags/tryit.as ... ml_areamap

[Volker]

Ja und woher hast die coordinaten ? Meine werden automatsch beim einzeichnen erstellt

[Tommy Herrmann]

Ja und woher hast die coordinaten ? Meine werden automatsch beim einzeichnen erstellt

Meinst Du mit dem Adobe-Dreamweaver oder was?

Na wenn Du damit so etwas schon machen kannst, dann mache es doch so. Mit Mobirise geht das natürlich nicht.

In meinem Beispiel muss man sich die Koordinaten austesten.

[Tommy Herrmann]

Das funktioniert jedoch nicht bei responsiven Seiten, da die Koordinaten fest sind. Meiner Meinung nach ist das nur mit Prozentangaben möglich, wie auf meiner Beispielseite:

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

Am Ende hat ja das Bild an jedem Gerät und Display eine andere Größe, wie z.B. am Handy, dann geht das nicht mit Koordinaten:

[Tommy Herrmann]

… natürlich gibt es auch für so etwas JavaScripts zur Anzeige der Koordinaten.

Hier mal eines (erstellt mit der KI von "ChatGPT"), das ich auf dieser Tutorial-Seite eingebaut habe:

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

[stobi_de]

Hier wäre sowas in der Art, das schwarze Haus
https://www.pfrommer-gmbh.de/

Beruht allerdings auch auf Tommies Technik, ist als bei vielen Positionen sehr aufwändig

[Volker]

Hier wäre sowas in der Art, das schwarze Haus
https://www.pfrommer-gmbh.de/

Beruht allerdings auch auf Tommies Technik, ist als bei vielen Positionen sehr aufwändig

Ja und geht mit dem Handy auch nicht. Keine Punkte zu sehen

Ich muss mir was anderes einfallen lassen.

[Tommy Herrmann]

Hallo Volker,

Frank hat das am Handy bewusst mittels Media-Abfrage so gestaltet, dass die Links unter das schwarze Architekturbild gelegt werden, da dort aufgrund der Größe Platzmangel herrscht.

Es funktioniert jedoch trotzdem.

Desktop-Ansicht:

Handy-Ansicht:

Das ist eine ziemlich aufwendige Geschichte mit diesen responsiven Hotspots, und ich habe damals lange daran herumprobiert. Mir fällt gerade keine bessere Möglichkeit ein.

[Volker]

Hab was gefunden,

mal sehen on ich es hin kriege

https://wiki.selfhtml.org/wiki/SVG/Tuto ... _Imagemaps

[Tommy Herrmann]

Ja - das wäre dann meine Seite.

Das HTML <map> Tag ist im Grunde dafür gedacht. Dort bilden die <area> Tags dann die Hotspots über Koordinaten:

https://www.w3schools.com/tags/tryit.as ... ml_areamap

Das hatte ich Dir doch oben schon geschrieben ...

Deswegen habe ich ja auch heute mal zunächst das mit den Koordinaten erstellt, was aber hierfür nichts bringt:

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

... denn die Koordinaten einer <map> beziehen sich ja eben auf die Größe der Map bzw. hier des verwendeten Bildes.

[Tommy Herrmann]

Habe das gerade mal in Mobirise mit dem <map> Tag ausprobiert.

Die Koordinaten in diesem Bild der Katze, das an meinem Laptop eine Größe von 625 x 416 Pixeln hat, sind dann ungefähr:

Links-oben: 305px,170px
Rechts-unten: 430px,310px

Das <map>-Tag erfordert Angaben in Pixeln; Prozentangaben sind nicht möglich.

Die Koordinaten beziehen sich also immer auf die Größe der Map (des Bildes).

Das würde sich nun so darstellen:

Code: Alles auswählen

<img src="assets/images/Katze.jpg" alt="Katzenbild" usemap="#myimage" width="625" height="416">
<map name="myimage">
  <area shape="rect" coords="305,170,430,310" alt="Katze" title="Katze" href="katzenseite.html">
</map>

Das funktioniert auch bestens, allerdings nur so lange, wie sich die Größe des Bildes nicht ändert, da die Koordinaten gleich bleiben, das Bild jedoch z.B. am Handy kleiner wird.

Das wäre also nur möglich, wenn man dem Bild eine feste Größe am Desktop zuweist und dann mittels Media-Abfrage eine andere feste Größe für das Handy, mit neuen Koordinaten, festlegt.

Das wäre dann eine "adaptive" und keine "responsive" Lösung.

[Tommy Herrmann]

Ich muss jetzt für einige Stunden weg ...

Ich baue das nachher mal in Mobirise ein.

… das könnte die Lösung sein, die mir ansatzweise wieder die KI "ChatGPT" gezaubert hat.

Das ist nun auch responsive:

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

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="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="Handy" onclick="window.location='javascript: void();'"></div>
    <div class="map-area" data-coords="505,60,710,290" style="left: 505px; top: 60px; width: 205px; height: 230px;" title="Kaffee" onclick="window.location='javascript: void();'"></div>
</div>

<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>

</body>
</html>

[Volker]

Ich mach es mit Auswahlmenü, habe aber das Problem das ich nicht das Iframe anspringen kann.

Code: Alles auswählen

<option value="https://fotoschulungen.com/rental/preview.php?cid=2&view=3"target="iframe_a" >Platz 1</option>

Klappt so leider nicht. Kannst Du mal gucken Tommy was ich da ändern muss.

https://fotoschulungen.com/plan/

[Tommy Herrmann]

Kann heute fast dem gesamten Tag nicht. Bin schon weg und nur am Handy.

[Volker]

Eilt nicht

Bin einfach zu doof bei Klick aufs Iframe zu verlinken.

[Tommy Herrmann]

Binde das Iframe doch als normalen Link ein:

https://www.w3schools.com/html/tryit.as ... ame_target