Tooltip/Mouseover Problem in eurem Forum!

[hahpuh]

Liebe Community,

ich habe ein großes Problem bezüglich eines Vorhabens von mir.
Ich habe vor ein Bild als Tooltip (Ein gewählter Link) anzeigen zu lassen, wenn ich mit der Maus über ein bestimmtes Wort fahre.
Hierzu möchte ich gern ein Beispiel zu Verfügung stellen:

Der Link: http://wow.gamona.de/das-spiel/was-ist-das/klassenguides/wotlk-vergelterpaladin-guide/3/#best-in-slot
Das Bild mit der Aktion: http://s1.directupload.net/file/d/3170/kme9ydja_gif.htm

Ich komme einfach nicht mehr weiter und bitte daher um Hilfe.

MfG

Hahpuh

[Günther]

Hallo und herzlich Willkommen, du bist neu hier im Forum. Mache dich bitte zunächst mit den hiesigen Forenregeln vertraut. Viele Antworten findest du auch in der Wissenssammlung "Lexi Help" Klick einfach auf das Bild Solltest du keine für dich passende Antwort in der Suchfunktion (Link in der Navigation) oder bei "Lexi Help" gefunden haben, dann eröffne pro Frage ein neues Thema. Ich wünsche dir hier im Forum viele Informationen und guten Erfolg mit deinem Forum

Ein "Problem in eurem Forum" ist das wohl eher nicht, sondern vielmehr ein Sonderwunsch von dir. Ich verschiebe den Thread deshalb aus dem Supportbereich nach "Allgemeine Diskussionen":
Hinweis bezüglich Templateänderungen, Scripten und HTML/ CSS-Codes

Ich habe hier solche Javascript-Tooltips aber schonmal ausführlich erklärt:
https://hilfe.forumieren.com/t34111-charakteranzeige-durch-anvisieren-des-bildes#223256
https://hilfe.forumieren.com/t34236-phpbb2-tooltip-problem
Wenn du dich da mal einliest, sollte dir das weiterhelfen.

Liebe Grüße
Günther

[hahpuh]

Dies hilft mir nicht weiter, da ich in den Code einfach nur die Url vom Bild haben einfügen möchte bzw. den Text auch einfach einfügen möchte.

Beispiel, das eigentlich gehen sollte, aber bei euch nicht funktioniert:

Code:

<a href="http://www.wowhead.com/?item=48621" target="_blank">
<span style="color: #a335ee; font-weight: bold;">Liadrins
Schulterplatten des Triumphs</span>
</a>

Eigentlich sollte er so lauten, jedoch geht es nicht, da ich nur bei Mausklick verlinkt werde und kein Tooltip angezeigt bekomme beim Mouseover.

[Günther]

Manchmal ist nicht alles so möglich, wie man es gerne möchte.
Aber wenn deine Lösung nicht funktioniert und du meine nicht verwenden möchtest, ist dieses Thema ja schon wieder erledigt.

Du kannst dir max. dort noch das title-Attribut ansehen, weitere Möglichkeiten gibt es nicht mehr:
http://de.selfhtml.org/html/attribute/allgemeine.htm

[hahpuh]

Wieso funktioniert es dann auf der Hp, die ich verlinkt habe, aber bei euch nicht? Woran liegt ? Ich möchte wie gesagt einfach ein Bild beim überfahren eines Wortes bzw. mehreren Wörter haben, das dann als Tooltip gilt. Einen externen link kann ich auch einfach mit [url]xxx[/url] einsetzten. Verstehen Sie, was ich meine?

[Günther]

Ich verstehe genau, was du meinst, und habe dir auch seit Beginn an die einzig mögliche Lösung dafür genannt.

Wenn sich beim Hovern eines Links ein Tooltip mit Bildern etc. öffnen soll, dann kann das nur über Javascript oder ggf. CSS erreicht werden. Mit dem Schema, das du hier gepostet hast, wird das nicht nur bei uns, sondern bei anderen Websites genausowenig funktionieren, weil es sich dabei schlicht und einfach um inkorrektes HTML handelt und nicht mehr.

Wieso funktioniert es dann auf der Hp, die ich verlinkt habe, aber bei euch nicht? Woran liegt ?

Die verlinkte Website hat eine eigene Datenbank, an die entsprechende Abfragen gestellt werden, und spezielle Javascript-Umsetzungen zusammengestellt. Dort hat man also mit viel Fachkenntnis und Aufwand eine entsprechende Umgebung geschaffen, die soetwas ermöglicht.
Solange diese Umgebung bei einer Website nicht vorhanden ist (und das ist sie bei deinem Forum nicht), sind solche besonderen Effekte auch nicht möglich.

Wie du dir das vorstellst, wird es grundsätzlich nicht möglich sein. Wie man generell solche Javascript-Tooltips erzeugen kann, habe ich dir oben verlinkt. Mehr Spielraum hast du allerdings nicht, tut mir leid.

[hahpuh]

Wenn sich beim Hovern eines Links ein Tooltip mit Bildern etc. öffnen soll, dann kann das nur über Javascript oder ggf. CSS erreicht werden. Mit dem Schema, das du hier gepostet hast, wird das nicht nur bei uns, sondern bei anderen Websites genausowenig funktionieren, weil es sich dabei schlicht und einfach um inkorrektes HTML handelt und nicht mehr.

Also wird mein Vorhaben funktionieren, jedoch nicht mit der "Html" Spache? Ich brauche also ein Javascript bzw. CSS Code für mein Vorhaben?

[Günther]

Genau.

[hahpuh]

Ich bin leider nicht all zu gut in Scripten bzw. ich kenne mich gar nicht mit CSS oder Java aus. Gibt es einen Code, indem ich einfach nur die Img-Url eingeben muss und denn vorerst angezeigten Text? Kennen Sie also einen Code, der mir meinen Wunsch sofort ermöglichen könnte, ohne das ich jetzt wieder Stunden rum googlen muss?

[Günther]

Ich habe hier solche Javascript-Tooltips aber schonmal ausführlich erklärt:
https://hilfe.forumieren.com/t34111-charakteranzeige-durch-anvisieren-des-bildes#223256
https://hilfe.forumieren.com/t34236-phpbb2-tooltip-problem
Wenn du dich da mal einliest, sollte dir das weiterhelfen.

[hahpuh]

Okey lieber Günther,

ich habe den ersten Link befolgt, jedoch verstehe ich diesen Code nicht ganz, da ich keinen externen Link, bzw. Bild anzeigen kann oder ich bin einfach nur zu trottelig:

<div data-ot="INHALT DES TOOLTIPS">GEHOVERTES OBJEKT</div>

GEHOVERTES OBJEKT: In dieses "Feld" füge ich den zuvor angezeigten Text, aber was kann ich denn in "INHALT DES TOOLTIPS" einfügen? Habs mit url=LINK probiert, jedoch es funktioniert nicht recht.

[Günther]

Bei "Inhalt des Tooltips setzt du das ein, was man im Tooltip sehen soll. Versuche es zuerst probehalber am besten mal mit reinem Text.
Das "gehoverte Objekt" wird von den beiden div-Tags umschlossen. Dabei handelt es sich um jenes Objekt, welches man hovern muss, um den Tooltip zu sehen. Dort kannst du nach dem üblichen HTML-Schema z.B. Links, Bilder etc. einsetzen.
Solltest du nicht wissen, wie diese aufgebaut sind, dann sieh dich bitte mal über Google um.

[hahpuh]

Ich habe dort jetzt einen reinen Text eingefügt, bekomme jedoch nichts im Tooltip angezeigt:

http://fidelity-fm.forumieren.com/t18-adawdawdda#30

Woran liegt es?

<div data-ot="hallo">Hier kommt der angezeigte Text rein</div>

Das "hallo" wird mir nicht angezeigt.

[Günther]

Daran, dass du die Anleitung nicht genau befolgt und das CSS nicht eingesetzt hast.

[hahpuh]

Günther du bist der Beste. Hatte es nicht abgespeichert.
Text wird nun angezeigt, zwar in weiß und der Hintergrund ist Gelb und somit nicht gut erkennbar, jedoch möchte ich im Tooltip kein Text, sondern jetzt ein externes Bild angezeigt haben, dass ich einfach per Url-Command einfügen kann.

[quote]<div data-ot="url=http://upload.wikimedia.org/wikipedia/commons/e/e9/Hungary_ajka_toxicspill_october9_2010_dgDetail.jpg">Hier kommt der angezeigte Text rein</div>[/quote]

Dies funktioniert nicht!

[quote]<div data-ot="[url]http://upload.wikimedia.org/wikipedia/commons/e/e9/Hungary_ajka_toxicspill_october9_2010_dgDetail.jpg[/url]">Hier kommt der angezeigte Text rein</div>[/quote]

Dies ebenfals nicht.

Was mache ich diesmal falsch?

[Günther]

Zuerst mal möchte ich dich bitten, deine Forenadresse wieder in dein Profil einzutragen, damit wir uns Probleme ggf. auch vor Ort ansehen können. Danke.

Dann kannst du in diesem Code keinen BBCode verwenden, dieser darf nie mit HTML vermischt werden und fällt schonmal ganz aus.

Du musst die Grafiken nur als ganz normale Bildelemente einsetzen. Die einzige Besonderheit besteht darin, statt der zweifachen Anführungszeichen dort nur einfache zu verwenden (damit du das data-ot - Attribut nicht dadurch zu früh abschließt ):

Code:

<div data-ot="<img src='BILDURL'>">Hovere mich!</div>

[hahpuh]

Supi Günther. Hab jedoch noch 2 Anliegen:

1) Wie definiere ich die Größe des Bildes im Tooltip ?

2) Wie definiere ich jetzt noch die Farbe des zuvor angezeigten Textes, alias "Hover mich"-Feld.

MfG

Hahpuh

[Günther]

Die Bildergröße sollte sich normalerweise selbst regulieren, sodass sie im Original belassen wird und der Tooltip sich entsprechend daran angleicht. Bei übergroßen Bildern ist es möglich, dass diese nicht original angezeigt werden, aber daran kannst du selbst wenig ändern, da du wahrscheinlich nicht am Script arbeiten wirst.
Die Textfarbe kannst du ganz klassisch festlegen:

<div data-ot="<img src='BILDURL'>" style="color:#FF0000">Hover mich!</div>

[hahpuh]

Dieses habe ich jetzt eingefügt, aber es klappt nicht:

<div data-ot="<img src=http://picture.yatego.com/images/464d59cb64a307.7/Kacke-am-Stock-is-auch-ne-Blume-T-Shirt-kqh/kacke-am-stock-is-auch-ne-blume-fun-t-shirt.jpg>">"style="color:#FF0000'>Boemmel im Reallife!</div>

[hahpuh]

Es hat doch geklappt, ich danke dir sehr.

[Günther]

Bitte.

Dann kann ich hier ja abschließen. Bitte aber in Zukunft statt Doppelpostings den -Button verwenden, um deinem Beitrag etwas hinzuzufügen.

Gute Nacht!
-closed-