Hallo. Ich würde gerne, wenn ich mit der Maus über bestimmte Teile eines Bild fahre, noch weitere Informationen zu diesem anzeigen lassen. Wie könnte man denn so etwas realisieren ?
Hier einmal ein schönes Beispiel.
Vielleicht gibt´s ja den einen oder anderen, der so etwas schon einmal gemacht hat, und mir weiterhelfen kann.
Vielen Dank
Frage zur Umsetzung
-
- Gerade eben
- Anzeige
Hallo!
Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.
- ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
- ✔️ Deutsche Server & DSGVO-konform
- ✔️ Persönlicher Support (kein 0815-Ticket-System)
-
Das ist ansich relativ simpel und mit purem CSS zu lösen:
HTML
Alles anzeigen<!DOCTYPE html> <html> <head> <style> span p { display:none; padding:2px; } span:hover p { top:-10px; display:inline; position:absolute; background: rgba(0,0,0,0.5); } </style> </head> <body> <span> Bild <p>Erläuterung</p></span> </body> </html>
- so natürlich nicht besonders hübsch, Ausrichtung und ähnliches musst Du schon selber machen ;) aber das Prinzip sollte jetzt klar sein, oder? -
Such mal nach imagemap. Vielleicht ist es das was Du suchst. Hab unter Deinem Link nichts gesehen auf Handy.
-
Das ist ansich relativ simpel und mit purem CSS zu lösen:
HTML
Alles anzeigen<!DOCTYPE html> <html> <head> <style> span p { display:none; padding:2px; } span:hover p { top:-10px; display:inline; position:absolute; background: rgba(0,0,0,0.5); } </style> </head> <body> <span> Bild <p>Erläuterung</p></span> </body> </html>
- so natürlich nicht besonders hübsch, Ausrichtung und ähnliches musst Du schon selber machen ;) aber das Prinzip sollte jetzt klar sein, oder?Äh, nicht wirklich. Wie und wo binde ich diesen Code denn ein ? Und wenn ich mehrere Sachen machen möchte so wie in dem Beispiel ?
-
Äh, nicht wirklich. Wie und wo binde ich diesen Code denn ein ? Und wenn ich mehrere Sachen machen möchte so wie in dem Beispiel ?
Oh, keinerlei Erfahrung mit HTML/CSS? Das hatte ich jetzt vorausgesetzt - in dem Fall musst Du entweder nach Fertiglösungen suchen (mit denen ich mich aber herzlich wenig auskenne) oder Dich zumindest grundlegend in CSS einarbeiten.Kurz zur Erläuterung: der obere Bereich ist CSS und besagt, dass der Bereich "p" innerhalb von "span" grundsätzlich nicht angezeigt werden soll (display:none). Der nächste Part besagt, wenn Du mit der Maus über "span" gehst (hover) soll "p" dargestellt werden (display:inline).
Normalerweise wird der Bereich innerhalb von "style" natürlich in eine eigene CSS-Datei ausgelagert, ich habs nur der Bequemlichkeit halber mal so gemacht.Der untere Bereich ist HTML, also das, was angezeigt wird - inklusive "span" und darin dem "p".
Das kann man natürlich beliebig oft wiederholen, allerdings musst Du dann die Ausrichtungen etwas verändern ;)
-
ich habs nur der Bequemlichkeit halber mal so gemacht.
Ich finde es hat nichts mit Bequemlichkeit zu tun. Styles, die nur in einer Seite benötigt werden, brauchen auch nur in dieser Seite zur Verfügung stehen. Somit ab in den Head damit und abfragen, ob es sich um die richtige Seite handelt:PHPif (is_single(345)) { // Gebe zusätzliche Styles für diese Seite aus }Wenn es denn mehr werden, dann lässt sich das in einer selten_benutze.css zusammenfassen und die Abfrage etwas ausweiten.
Puh, ich glaub ich such da wirklich was fertiges.
Plugins gibt es zwar beinahe für alles, irgendwie gab es auch einmal so eine ähnliche Frage, doch woher soll so ein Plugin nun wieder wissen, welchen hinweisenden Text Du wo einfügen möchtest?
Lasse es lieber ganz, wenn Du bereits mit so einem einfachen Beispiel, wie dem von Nevery, nicht klar kommst.
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!