mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 05.06.2020 04:35 Benutzername: Passwort: Auto-Login

Thema: Bild mit hover Textelementen vom 24.04.2020


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Bild mit hover Textelementen
Autor Nachricht
Corenn
Threadersteller

Dabei seit: 16.09.2014
Ort: Cologne
Alter: 34
Geschlecht: Weiblich
Verfasst Fr 24.04.2020 08:43
Titel

Bild mit hover Textelementen

Antworten mit Zitat Zum Seitenanfang

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. *ha ha*

Oder habt Ihr andere Lösungen?

Liebe Grüße
Corenn
  View user's profile Private Nachricht senden
JonathanB

Dabei seit: 18.04.2017
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Fr 24.04.2020 13:33
Titel

Antworten mit Zitat Zum Seitenanfang

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.


Zuletzt bearbeitet von JonathanB am Fr 24.04.2020 13:37, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Corenn
Threadersteller

Dabei seit: 16.09.2014
Ort: Cologne
Alter: 34
Geschlecht: Weiblich
Verfasst Fr 24.04.2020 14:53
Titel

Antworten mit Zitat Zum Seitenanfang

* Ich bin unwürdig * Danke dir. Krieg ich das als Neuling oder eingerosteter alter Bekannter in dem Thema auch hin? Oder meinste direkt neee... viel zu komplex. Grins 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 ^^"



JonathanB hat geschrieben:
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.
* Ich bin unwürdig *
  View user's profile Private Nachricht senden
top
Moderator

Dabei seit: 25.11.2003
Ort: Hedwig Holzbein Status:0
Alter: 48
Geschlecht: Männlich
Verfasst Fr 24.04.2020 16:06
Titel

Antworten mit Zitat Zum Seitenanfang

Vielleicht hilft das weiter?

https://www.mediaevent.de/html/area-map.html
  View user's profile Private Nachricht senden
 
Ähnliche Themen hover-Button/hover-Bild wird darunter eingefügt
CSS - Hover / Link / Bild - Bild verschwindet nach Klick
Kreiselement vor Bild bei Hover
Bild wackelt bei img:hover
Rahmen-hover-Effekt um verlinktes Bild im IE
hover effekt über bild - ajax, javascript?
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.