[Corenn]

Guten morgen Ihr Lieben,

ich bin aktuell auf der Suche, nach einer Möglichkeit, ein Bild zu unterteilen in unterschiedliche Segmente. Das Ganze soll auf einer Homepage eingebunden werden. Nix dolles.

Man stelle sich ein Bild vor, mit der Maus geht man dann über einen Bereich den man anklickt oder eben hovert. Als Hover öffnet sich dann ein Feld mit Textbeschreibung. Mehr soll das Ding eigentlich nicht können.

Ich habe das vor Jahrhunderten einmal im Flash gelernt mit dem Actionscript - das ist aber sicherlich 10 Jahre her mittlerweile. Nun stellt sich mir die Frage, ist das prinzipiell im Adobe Animate CC möglich oder gibt es dafür auch eine Plugin Lösung für Wordpress.

Oder habt Ihr andere Lösungen?

Liebe Grüße
Corenn

[JonathanB]

Das lässt sich heutzutage auf alle Fälle ohne Flash lösen.
Vielleicht gibt es ja sogar irgendwo eine Komplettlösung.
Falls Du es aber selber scripten musst hätte ich folgende Denkanstöße:

Teil es in zwei Teilprobleme auf:

1. Tooltip an Mausposition

Da gibt es wenn Du mal suchst bestimmt schon viele Lösungen mit jQuery
Im Endeffekt ist das einfach ein floating DIV, dass an die Mausposition bewegt und sichtbar geschaltet wird.


2. Segmentierung eines Bildes in einzelne Klickzonen.

Zu 2 würde ich vorschlagen ein Inline-SVG zu nutzen. Da kannst Du dein Bild einfach in den Hintergrund legen und dann darüber beliebig geformte und positionierte Vektorelemente ohne Farbe legen. Die einzelnen Elemente eines SVG können jeweils mit eine ID versehen werden (SVG besteht genau wie HTML aus einzelnen Tags) und somit mit JS interagieren. Etweder mit einem Event-Listener, der dann die entsprechende ID auswertet, oder du fügst ganz krude einfach in jedes Element ein onclick="{...}" Javascript ein – da schreibst du dann natürlich viel Code doppelt.

[Corenn]

Danke dir. Krieg ich das als Neuling oder eingerosteter alter Bekannter in dem Thema auch hin? Oder meinste direkt neee... viel zu komplex. Aber ich bin froh, dass es doch iwie eine Lösung gibt, dann werde ich mal das schlaue google nutzen und mich halt zwingend einarbeiten müssen - es hilft ja nix - sofern ich das umsetzen kann ^^"

[top]

Vielleicht hilft das weiter?

https://www.mediaevent.de/html/area-map.html