Seite 1 von 4
Spoiler-Popup bei Mouseover
Verfasst: 31.10.2008 17:32
von 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?
Verfasst: 31.10.2008 18:28
von 4seven
Verfasst: 31.10.2008 18:29
von 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.
Verfasst: 31.10.2008 18:37
von 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
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
-------
Benutzung
-------------------
Den Rest kannst du dann auf eigene Bedürfnisse hin anpassen

Verfasst: 31.10.2008 18:49
von CacaVolante
Fein, ich danke vielmals. Werde Bericht erstatten, obs funktioniert hat!

Verfasst: 31.10.2008 19:14
von 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.
Verfasst: 31.10.2008 19:24
von 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
Verfasst: 31.10.2008 19:43
von 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.
Verfasst: 31.10.2008 19:58
von 4seven
Dann versuch mal
das...
>> Link zur Grafik anpassen
BBCode
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
oder das
>> Link zur Grafik anpassen
BBCode
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
Verfasst: 31.10.2008 20:03
von 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.