Spoiler-Popup bei Mouseover

[CacaVolante]

Hallo, ihr Lieben!

Tut mir leid, wenn ich in der Suchfunktion nix gefunden habe.

Es gibt ja auf einigen Foren eine sog. Spoiler-Funktion - entweder ist der Text, der in den [spoiler]-Tags zu finden ist, dann nur sichtbar, wenn man ihn markiert, oder der Text ist über eine Schaltfläche sichtbar und lässt sich genau so wieder verstecken.

Ich allerdings möchte, dass nur eine "Spoiler"-Schaltfläche oder eine entsprechende Grafik in einem Posting zu sehen ist, und wenn man mit der Maus drüber fährt, soll das dann ähnlich wie bei Tooltips so lange sichtbar sein, wie der Mauszeiger sich in eben diesem Areal bewegt.

Gibt es einen Code, den ich ganz normal im Admin-Menü für eigene BBCodes verwenden kann?

[4seven]

so wie hier?

http://sekuro.se.funpic.de/phpbb3/viewt ... f=14&t=137

[CacaVolante]

Zum Beispiel. Das sieht doch mal gut aus. Wie krieg ich das denn hin?

Der Text soll natürlich dann {TEXT} sein, also immer das, was zwischen den Spoiler-Tags liegt.

[4seven]

genauso ginge das

------

Dazu hier wz_tooltip.zip runterladen..
http://www.walterzorn.com/scripts/wz_tooltip.zip

..und aus dem Paket die Datei wz_tooltip.js in euer Templateverzeichnis laden

Dann die overall_header.html öffnen und direkt hinter dem einleitenden body-tag das hier einfügen..

Code: Alles auswählen

<script type="text/javascript" src="{T_TEMPLATE_PATH}/wz_tooltip.js"></script>

..dann ins ACP > Beiträge > BBCodes

BBCode

Code: Alles auswählen

[explanation={TEXT2}]{TEXT1}[/explanation]

Html-Ersetzung

Code: Alles auswählen

<span style="cursor: help; color: blue" onmouseover="Tip('{TEXT1}', WIDTH, '-200')" onmouseout="UnTip()">{TEXT2}</span>

Tipp-Anzeige

Code: Alles auswählen

Explanation: [explanation=Begriff]Erklärung[/explanation]

Beim Verfassen eines Beitrags anzeigen

Code: Alles auswählen

Ja

-------

Benutzung

Code: Alles auswählen

[explanation=Begriff]Erklärung[/explanation]

-------------------

Den Rest kannst du dann auf eigene Bedürfnisse hin anpassen

[CacaVolante]

Fein, ich danke vielmals. Werde Bericht erstatten, obs funktioniert hat!

[CacaVolante]

So, funktioniert. Fast.

http://smalltowncriminals.de/newsfl/for ... &sk=t&sd=a

Wie man sieht, ist das Posting des Users "abuzze666" zerschossen, der Inhalt ist "Kuhle Idee! " - ich denke, der Doppelpunkt oder ein anderes Zeichen macht hier Probleme. Kann man das irgendwie umgehen?

Ansonsten wird die Tooltip-Box natürlich noch farblich angepasst (wenn ich herausfinde, wo *g*) und statt dem Spoilerhinweistext wird dort ein Button zu finden sein - daher sollen die optischen Faktoren nun eher ein sekundäres Problem sein.

[4seven]

Wie man sieht, ist das Posting des Users "abuzze666" zerschossen, der Inhalt ist "Kuhle Idee! " - ich denke, der Doppelpunkt oder ein anderes Zeichen macht hier Probleme. Kann man das irgendwie umgehen?

hatt ich bis dato noch nicht beobachtet. hmm...

ahja, ... ändere den bcode mal testweise von

BBCode

[explanation={TEXT2}]{TEXT1}[/explanation]

zu

BBCode

[explanation="{TEXT2}"]{TEXT1}[/explanation]

Ansonsten wird die Tooltip-Box natürlich noch farblich angepasst (wenn ich herausfinde, wo *g*)

http://www.walterzorn.com/tooltip/tooltip_e.htm

hier ab:

8. Commands to customize tooltips individually

und statt dem Spoilerhinweistext wird dort ein Button zu finden sein - daher sollen die optischen Faktoren nun eher ein sekundäres Problem sein.

jup

[CacaVolante]

TEXT2 benötige ich nicht, da ja bald eine einheitliche Grafik statt des Spoiler-Hinweises zu sehen sein wird, über die man dann mit dem Mauszeiger fahren kann. Das bleibt ja dann stets gleich. Somit ist für meine Zwecke nur die Variable TEXT1 von Bedeutung, also der Text, der zwischen den Tags liegt..

Nun muss ich nur noch dem Zeichenproblem auf die Schliche kommen.

[4seven]

Dann versuch mal das...

>> Link zur Grafik anpassen

BBCode

Code: Alles auswählen

[explanation]"{TEXT}"[/explanation]

Html-Ersetzung

Code: Alles auswählen

<img src="http://www.grafik.de/deine_einheitliche_grafik.jpg" style="cursor: help; color: blue" onmouseover="Tip('{TEXT}', WIDTH, '-200')" onmouseout="UnTip()" />

Benutzung

Code: Alles auswählen

[explanation]"Erklärung"[/explanation]

oder das

>> Link zur Grafik anpassen

BBCode

Code: Alles auswählen

[explanation]{TEXT}[/explanation]

Html-Ersetzung

Code: Alles auswählen

<img src="http://www.grafik.de/deine_einheitliche_grafik.jpg" style="cursor: help; color: blue" onmouseover="Tip('{TEXT}', WIDTH, '-200')" onmouseout="UnTip()" />

Benutzung

Code: Alles auswählen

[explanation]Erklärung[/explanation]

[CacaVolante]

Ja, das ist alles sonnenklar, das mit der Grafik - und im js kann ich ja auch die Variablen wunderbar anpassen, was die Farbgebung angeht. Das hab ich nun alles rausbekommen.

Mein einziges Problem bleibt daher noch der Fehler mit den Sonderzeichen, so stellt sich das Script bei Zeichen wie ; ' und dergleichen ziemlich an.