Mobirise-Tutorials.com

Forum für Mobirise und NOF
https://mobirise-tutorials.com/Forum/

Ultimate Popup Hotspot Map

https://mobirise-tutorials.com/Forum/viewtopic.php?t=1971

Seite 1 von 2

Ultimate Popup Hotspot Map

Verfasst: Mo 19. Jan 2026, 00:05
von Volker
Huhu :D

Hier mal eine kleine Vorschau auf das was nächste Woche kommt ;)

https://www.niederastroth.de/hot

Geiler Scheiß :D

Re: Ultimate Popup Hotspot Map

Verfasst: Mo 19. Jan 2026, 00:15
von Bushisan
WOW - das hat was - SUPER!!!!!

Re: Ultimate Popup Hotspot Map

Verfasst: Mo 19. Jan 2026, 00:24
von Volker
Bushisan hat geschrieben: Mo 19. Jan 2026, 00:15 WOW - das hat was - SUPER!!!!!
Wenn du dann siehst wie einfach das in mobirise zu bedienen ist wirst du mit der Zunge schnalltzen ;)

Kleiner Vorgeschmack :
map.png
Im Moment im Block 10 Hot Spots - erweiterbar auch 20,30 50 ....
Alles Spots verlinkbar Symbole aus der Icon Sammlung nutzbar und und und :D
Aber ganz Wichtig !!! Auch bei Änderung der Ansicht sind die Spots da wo sie sein sollen !!

Re: Ultimate Popup Hotspot Map

Verfasst: Mo 19. Jan 2026, 06:08
von stobi_de
Oha!
Bei der bisherigen Technik mit der zu-Fuß-Eingabe der Prozente war man ja ewig beschäftigt.
Und weil der Herr Stober ja immer dolle Ideen hat, die anderen dann Arbeit verursachen :verlegen:
https://www.pfrommer-gmbh.de/
Da sind dann noch Beschreibungen dran, die ausgeführte Aktion ist anders und im Handy-Modus sieht dann alles ganz anders aus (der schwarze Plan von dem Haus)
Aber erstmal nur Ideen sammeln, gell ?!

Ein Stober am morgen bringt....

Re: Ultimate Popup Hotspot Map

Verfasst: Mo 19. Jan 2026, 06:48
von Volker
Moin Frank,

Du bist herzlich eingeladen diesen Block dann noch zu erweitern ;)
Da sind fast keine Grenzen gesetzt.

Ich werde den jetzt so wie er ist raus hauen. Ich lass auch nur 10 Hotspots drin. Wer mehr haben möchte, oder Tooltips usw. der kann das ja erweitern.

Tooltip hab ich noch rein ;)

Somit für mich jetzt fertig :D

Re: Ultimate Popup Hotspot Map

Verfasst: Mo 19. Jan 2026, 07:51
von Volker


Hier der Block als mbrext: https://www.niederastroth.de/ultimate-p ... map.mbrext

Re: Ultimate Popup Hotspot Map

Verfasst: Mo 19. Jan 2026, 08:13
von Bushisan
Guten Morgen,

hab mir das mal runtergeladen und schau mal wie ich das nutzen kann. Dankeschön.

Grüße aus der schönen Oberpfalz

Re: Ultimate Popup Hotspot Map

Verfasst: Mo 19. Jan 2026, 21:19
von Volker
Ich habe noch etwas nachgebessert ;)

Tooltip hat eigene CSS und somit kann die Schriftart in der CSS eingestellt werden. Jetzt Arial.

Responsive Verhalten verbessert -
Tooltips werden bei Touch (Tippen) angezeigt
Schließt Tooltip automatisch, wenn außerhalb getippt wird
Re-initialisiert Hotspots bei Browser-Größenänderung

Ist jetzt Aktuell im Download enthalten

Re: Ultimate Popup Hotspot Map

Verfasst: Do 29. Jan 2026, 17:55
von Volker
So,
wem 10 Spots nicht reichen ;)

Hier meine 50 Spots Version mit Mega Großen Bild ( Einstellbar am Zahnrad )

Gibt es für 20 Euro Spende - für Faule :D

https://www.niederastroth.de/50spots/

Re: Ultimate Popup Hotspot Map

Verfasst: So 22. Feb 2026, 18:53
von struggle
Hallo,
hab`mir das Teil runtergeladen und in Mobirise 4 importiert. Wenn ich einen Hotspot am unteren Bildrand anklicke, springt das Bild nach oben. Und wenn ich das Bild entsprechend verkleinere, kann ich keine Hintergrundfarbe enstellen. Vielleicht ist das Mobirise 4 geschuldet. M4 Themenblocks stehen mir nicht zur Verfügung.
Beim lokalen Veröffentlichen erscheint mir folgende Fehlermeldung:
error.PNG
Was ist das ?

Re: Ultimate Popup Hotspot Map

Verfasst: So 22. Feb 2026, 19:05
von Volker
Wenn du keinen Hotspot verlinkt hast geht es immer nach oben ;)
Du solltest die Hotspots ja auch verlinken, entweder popup, oder slider oder oder ;)

Sonst machts ja auch keinen Sinn :D

Re: Ultimate Popup Hotspot Map

Verfasst: So 22. Feb 2026, 19:10
von struggle
Vielleicht hätte ich mir Dein Video ansehen sollen, :confused: Entschuldige

Re: Ultimate Popup Hotspot Map

Verfasst: So 22. Feb 2026, 19:22
von Volker
So macht es sinn ;)

https://niederastroth.de/hotspotzhtml.html

Re: Ultimate Popup Hotspot Map

Verfasst: Mo 23. Feb 2026, 08:44
von Tommy Herrmann
Moin,

nur zur Info, das mit den Hotspots, die auch Frank verwendet hat, kam ursprünglich vor Jahren von mir - noch ohne KI:

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

Oder auch hier (andere CSS/JS) - mit KI:

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

Keine Ahnung, ob Deine Version so ähnlich funktioniert :confused:

Re: Ultimate Popup Hotspot Map

Verfasst: Mo 23. Feb 2026, 09:52
von Volker
Moin Tommy,

Du hast eben einiges verpasst ;)
Mein Block ist anders. Hier werden bis zu 10 Hotspost platziert, die Anzahl einstellbar im Zahnrad. Die Positionierung geht über schieber x und y Achse. Schau Dir mein Video dazu an:



Und das ganze gibt es auch mit 50 Hotspost mit Mega Bild
https://niederastroth.de/megahotspots.html

Re: Ultimate Popup Hotspot Map

Verfasst: Mo 23. Feb 2026, 14:15
von Tommy Herrmann
Das ist doch das gleiche Video :confused:

Was hat denn die Anzahl der Hotspots mit der Technik zu tun? Ich könnte unendlich viele Hotspots einbauen.

Auf jeden Fall sollte das eine brauchbare Anwendung sein.

Re: Ultimate Popup Hotspot Map

Verfasst: Mi 25. Feb 2026, 17:11
von struggle
So, ich habe das Teil jetzt in meine Webseite https://www.meinlangengrassau.de/stadtplan.html integriert, wobei ich die Anzahl der Hotspots erweitert habe. Das sieht soweit alles gut aus. Auf dem Handy ist das natürlich alles überladen, da hilft nur die Queransicht.
Jetzt gibt es aber ein paar wenige Dinge, die bei mir leider nicht funktionieren:
- Backgroundcolor läßt sich nicht einstellen
- Der untere Rand läßt sich nicht an den Block darunter anpassen
- Wenn Hotspots nahe aneinander sind, dann werden Tooltips davon (nicht immer) verdeckt

Jetzt habe ich nur den obersten Hotspot mit einem ModalWindow (witsec) verlinkt. Das hat auch gut funktioniert. Wie aber bitteschön kann ich alle Hotspots mit jeweils einem anderen ModalWindow verlinken ?

Re: Ultimate Popup Hotspot Map

Verfasst: Mi 25. Feb 2026, 17:58
von Volker
Hi bitte diese 2 Fixes machen.

Im HTML ganz oben die erste Zeile komplett ersetzen durch diese:

Code: Alles auswählen

<section class="hotspot-section" mbr-class="{'full-padding': !removePadding}" style="background-color: #f4f4f4;" once="hotspots">
Im CSS Teil dies einsetzen:

Code: Alles auswählen

.hotspot-section {
  padding: 0 !important;
  overflow: hidden;
  position: relative;
  background-color: @bgColor;
}
Werde ich heute im Laufe des Abends fixen und dann online stellen. Dann ist die mbrext also mit Farbeinstellung online.

Re: Ultimate Popup Hotspot Map

Verfasst: Mi 25. Feb 2026, 18:00
von Volker
struggle hat geschrieben: Mi 25. Feb 2026, 17:11 Jetzt habe ich nur den obersten Hotspot mit einem ModalWindow (witsec) verlinkt. Das hat auch gut funktioniert. Wie aber bitteschön kann ich alle Hotspots mit jeweils einem anderen ModalWindow verlinken ?
Du kannst jeden Hotspot mit einem Popup verlinken. Du musst halt mehrere anlegen - wo ist das Problem ?

Re: Ultimate Popup Hotspot Map

Verfasst: Mi 25. Feb 2026, 19:20
von Volker
Zum Thema Tooltip unter dem Hotspot.
Hier mal eine CSS Änderung probieren.

ALT:

Code: Alles auswählen

.hs-wrap {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 100;
  line-height: normal;
  pointer-events: none;
}
tauschen gegen NEU:

Code: Alles auswählen

.hs-wrap {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 100;
  line-height: normal;
  pointer-events: none;
}
.hs-wrap:has(.hs-dot:hover) {
  z-index: 200;
}
Alle Zeiten sind UTC+01:00
Seite 1 von 2

Powered by phpBB® Forum Software © phpBB Limited

Deutsche Übersetzung durch phpBB.de