Ultimate Popup Hotspot Map

[Volker]

Huhu

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

https://www.niederastroth.de/hot

Geiler Scheiß

[Bushisan]

WOW - das hat was - SUPER!!!!!

[Volker]

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 :

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

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

[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

[Volker]

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

[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

[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

[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

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

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

Was ist das ?

[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

[struggle]

Vielleicht hätte ich mir Dein Video ansehen sollen, Entschuldige

[Volker]

So macht es sinn

https://niederastroth.de/hotspotzhtml.html

[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

[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

[Tommy Herrmann]

Das ist doch das gleiche Video

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.

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

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

[Volker]

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 ?

[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;
}