Funktionen & Template » Spoiler-Button (Update)

Florians Forum � Webmaster � Xobor (Homepagemodules & Dynamicboard) � Funktionen & Template � Spoiler-Button (Update)

Themen-Einstellungen

Thema drucken

Bereich wechseln

#1 | Spoiler-Button datum

07.01.2008 20:31 (zuletzt bearbeitet: 08.06.2008 14:58)

Ein Button als Spoiler ist eine praktische Funktion. Mit ihm kann ein ausgew�hlter Text-Abschnitt ausgeblendet werden.
JavaScript muss aktiviert sein, damit die Funktion ausf�hrbar ist.
(Erkl�rung zum Spoiler-Button)

Zuerst muss unter Admin -> Layout -> Header & Footer folgender Quelltext im Header eingef�gt werden:

Anschlie�end wird unter Admin -> Einstellungen -> Codes/Smilies in den Feldern unter "Hinzuf�gen eines neuen Forumcodes" der neue Foren-Code [spoiler]
mit

und [/spoiler]
mit

</div></div></div>

ersetzt.

Zuletzt wird unter Admin -> Einstellungen -> Symbol-Bar die Symbol-Bar erg�nzt, damit auch die Foren-Mitglieder die Funktion nutzen k�nnen.

Dazu einfach an geeigneter Steller diese Zeile einf�gen:

z.B. direkt �ber:

Spoiler in Aktion:
versteckter Text

florian-zier hat folgende Bilder an diesen Beitrag angeh�ngt

spoiler.jpg

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Antworten

#2 | RE: Spoiler-Button datum

18.02.2008 17:11

Hallo.
Habe ein Problem mit dem Spoiler-Button und den "Auflistungszeichen" <li> + </li>.

In meinem Forum habe ich diese Zeichen (Auflistungspunkte) in den Forum-Code umgesetzt.

[li]Test[/li]

Werden diese Auflistungszeichen im Spoiler verwendet, verschwindet der Abschluß-Button nach dem Anklicken, auch wenn der Spoiler wieder geöffnet wird.
Wird die Seite neu aufgerufen, ist er wieder da.

Weist Du hier weiter?

Gruß
Wolfgang

Forum: Der Treffpunkt für Hilfe, Tricks & Tipps

Antworten

#3 | RE: Spoiler-Button datum

18.02.2008 23:20

Also ich habe das mal mit der HTML-Variante in meinem Test-Thread probiert.

Hier auch mein Code:

[spoiler]
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
[/spoiler]

Bei mir verschwindet der Button nicht, auch nicht im IE, falls dies nur dort aufgetreten ist.

1. Welcher Browser hat den Fehler gemacht? IE, Firefox, ... oder alle?
2. Waren auch die ul-Tags einegf�gt, bzw. auch als Foren-Code verf�gbar?

Bei SelfHTML ist der Aufbau einer Liste nochmals nachzulesen.

Sollte dies alles �berpr�ft worden sein, hier noch eine Alternative:
Meine erste Anfrage ging direkt mal in's Support-Forum.
Da die Antwort aber sehr simpel ist, habe ich noch ein wenig weiterprobiert. Das im Support-Forum ist also nicht mehr 100% aktuell.
Im Moment habe ich ein paar Funktionen in der Test-Phase. Diese geh�rt z.B. auch dazu. Gravierende Fehler habe ich bisher nicht entdecken k�nnen. Deshalb stelle ich diese kurze Anleitung hier und jetzt schonmal zur Verf�gung. Eine extra Anleitung k�nnte demn�chst folgen.
Eine Beispiel-Liste kann in diesem Beitrag angeschaut werden: Quellcode-�bersicht
Ein Screenshot davon findet sich im Anhang.

[list]

ersetzen mit:

[/list]

ersetzen mit:

</div>

Punkt f�r Auflistung

[*]

ersetzen mit:

• 

Doppelpfeil f�r Auflistung

[}}]

ersetzen mit:

Ich habe bewusst f�r die Liste verwendet. Sie soll immer extra und nicht mit in der Zeile stehen.

[>>]

konnte ich f�r den zweiten Code nicht verwenden, da der Beitrag beim Edit sonst in HTML umgewandelt wird. Deshalb habe ich

[}}]

genommen, immerhin hat es ein wenig �hnlichkeit.
Die hinter dem Kreis bzw. dem Doppelpfeil sind extra, damit man gleich nach dem Foren-Code weiterschreiben kann, sp�ter aber ein kleiner Abstand zwischen dem Aufz�hlungszeichen zu sehen ist.

In der CSS-Klasse "list" habe ich diesen Style angegeben:

.list {
padding-left:20px;
white-space:pre;
font-weight:normal;
}

Das Pre sieht nicht ganz so aus, wie wenn man den zugeh�rigen Foren-Code dazu verwendet.
Dann kann man ja aber auch

[list][pre]

Liste

[/pre][/list]

verwenden oder im umgesetzten Foren-Code innerhalb des Divs ein

einf�gen.
Die Listen werden durch das

padding-left:20px;

vom linken Rand aus einger�ckt.

Eine mit HTML-Tags definierte Liste kann auch mit Gro�-/Klein-Buchstaben, Zahlen, versehen werden.
Vor allem geschieht dies automatisch. Falls der Automatismus bei der Nummerierung gew�nscht ist, kommt man um eine Umsetzung der Listen-HTML-Tags nicht herum.
Mit dieser hier beschriebenen Variante kann der Admin aber beliebige Zeichen als Men�-Punkt f�r eine Liste definieren.
Au�erdem kann man auch selbst mit Buchstaben und Zahlen arbeiten. Anstatt a. verwenden zu m�ssen, kann dann auch a) verwendet werden.
Genauso verh�lt es sich mit (r�mischen) Zahlen. Einzig und allein um die muss man sich selbst k�mmern. Diese sind aber durch pre in der CSS auch m�glich, bzw. wenn das Pre-Tag oder der Foren-Code stattdessen verwendet wird.

So sieht's sp�ter aus:

» Doppelpfeil
• Punkt
» Doppelpfeil
• Punkt

Huiii, das wurde dann doch wieder etwas l�nger...
Aber vielleicht hilft es ja!

florian-zier hat folgende Bilder an diesen Beitrag angeh�ngt

quellcodes_liste.jpg

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Antworten

#4 | RE: Spoiler-Button datum

20.02.2008 18:05 (zuletzt bearbeitet: 20.02.2008 18:27)

Hallo Florian,
ich habe die Ursache gefunden!

Es liegt darin, dass ich keine korrekte Liste angelegt habe!
Wie Du gezeigt hast, beginnt eine Liste mit z.B. <ul> und endet mit </ul>.

Wenn ich die beiden HTML-Codes in BB-Codes umsetze und damit eine Tabelle aufbaue, funktioniert der Spoiler-Button 1A!

[spoiler]
[ul]
[li]TEXT[/li]
[li]TEXT[/li]
[li]TEXT[/li]
[/ul]
[/spoiler]

• Das würde aber immer voraussetzen, dass der Benutzer wissen muss, wie eine Liste aufgebaut wird!
• Für eine unkomlizierte Bedienung aus der Symbolbar heraus, bietet sich die einfache Umsetzung an.

[li] --->   • 

Vielen Dank für Deine Ausführliche Antwort.

Sehr informativ und aufschlussreich

Gruß
Wolfgang

Forum: Der Treffpunkt für Hilfe, Tricks & Tipps

Antworten

#5 | RE: Spoiler-Button datum

06.05.2008 21:19

Ich muss mich gleich in meinem ersten Beitrag mal bei Dir / Euch bedanken. Habe diesen Spoiler soeben bei mir eingebaut und der ist ja sowas von Klasse.

Antworten

#6 | RE: Spoiler-Button datum

07.05.2008 14:31 (zuletzt bearbeitet: 07.05.2008 14:31)

Das freut mich!

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Antworten

#7 | Spoiler-Button (Update) datum

08.06.2008 15:24 (zuletzt bearbeitet: 28.08.2009 15:24)

Mit einem Spoiler kann ein ausgew�hlter Text-Abschnitt ausgeblendet werden.
Bei dieser neuen Version steht ein weiterer Ausblenden-Button am Ende.
So k�nnen lange Texte, ohne nach oben zu scrollen, geschlossen werden.

JavaScript muss aktiviert sein, damit der Button funktioniert.
(Erkl�rung zum Spoiler-Button)

Zuerst muss im Template Element "Obere Leiste" folgender Quelltext zwischen den Head-Tags eingef�gt werden:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<script language="javascript" type="text/javascript">
// Spoiler Klapp-Funktion
function spoiler_on(me) {
	if (me.parentNode.parentNode.getElementsByTagName('span')[1].getElementsByTagName('span')[0].style.display != 'block') {
		me.parentNode.parentNode.getElementsByTagName('span')[1].getElementsByTagName('span')[0].style.display = 'block';
		me.innerText = '';
		me.value = 'Hide';
	}
	else {
		me.parentNode.parentNode.getElementsByTagName('span')[1].getElementsByTagName('span')[0].style.display = 'none';
		me.value = 'Show';
	}
}
function spoiler_off(me) {
	me.parentNode.style.display = 'none';
	me.parentNode.parentNode.parentNode.getElementsByTagName('span')[0].getElementsByTagName('input')[0].value = 'Show';
}
</script>

Als n�chstes kommen die CSS-Angaben auch zwischen die Head-Tags:

1
2
3
4
5
6
7
8
9
10
11
12

<style type="text/css">
/* Spoiler */
.spoiler_button {
	width:50px;font-size:10px;margin:0px;padding:0px;
}
.spoiler_inhalt {
	display:none;border:double;width:95%;padding:10px;overflow:auto;
}
.spoiler_hide {
	font-size:10px;margin:0px;padding:0px;
}
</style>

Anschlie�end wird unter Admin -> Einstellungen -> Codes/Smilies in den Feldern unter "Hinzuf�gen eines neuen Forumcodes" der neue Foren-Code 1
[spoiler]
mit

<span><span><input name="button" type="button" class="spoiler_button" onClick="spoiler_on(this);" value="Spoiler" onmouseover="this.style.cursor='pointer';"></span><span><span class="spoiler_inhalt">

und 1
[/spoiler]
mit

<br /><br /><input name="button" type="button" class="spoiler_hide" onClick="spoiler_off(this);" value="ausblenden" onmouseover="this.style.cursor='pointer';"></span></span></span>

<A HREF="javascript:insert('[spoiler]','[/spoiler]')"><img src="http://www.bilder-hochladen.net/files/585t-5.png" title="[spoiler] versteckter Text [/spoiler]" border=0 width="48" height="17"></A>

Spoiler in Aktion:
versteckter Text

Hinweis:
Damit die Funktionalit�t des alten Spoilers erhalten bleibt, reicht es aus, das alte JavaScript einfach zu belassen.

florian-zier hat folgende Bilder an diesen Beitrag angeh�ngt

Spoiler_neu.png

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Antworten

#8 | RE: Spoiler-Button (Update) datum

06.01.2011 18:55 (zuletzt bearbeitet: 06.01.2011 19:16)

Hallo Florian,
läßt sich die Funktion des Spoilers so umdrehen, das er am Anfang geöffnet ist?
Man könnte Ihn dann z.B. zum Ausblenden von Textstellen verwenden.

Läßt sich der Zustand des Spoilers auch über ein Cookie speichern?

Währe super, wenn Du hier eine Lösung siehst.

Bis dann
Wolfgang

Forum: Der Treffpunkt für Hilfe, Tricks & Tipps

Antworten

#9 | RE: Spoiler-Button (Update) datum

07.01.2011 17:58

florian-zier

Administrator

Informationen anzeigen

Beitr�ge:	837
Punkte:	1895
Registriert seit:	19.04.2007
Wohnort:	Oberkirch

Hallo Wolfgang,
um welchen Spoiler dreht es sich nun �berhaupt?
Um einen der hier entwickelten (mit/ohne Ausblendebutton), oder den aktuellen von HPM?

Standardm��ig einblenden k�nnte gehen.
�ndere einfach mal

1
 
style="display:none;"

beim ausgeblendeten Element in

1
2
3
 
style="display:block;"
oder
style="display:inline-block;"
 

Dann sollte es beim Laden der Seite wohl angezeigt werden.

Die Sache mit dem Cookie sehe ich problematisch.
Die Spoiler haben jeweils keine eigene und konstante ID.
Die Nummer des Spoilers nach dem Quellcode kann sich auch durch neue oder gel�schte Beitr�ge verschieben.
Dann w�rden die falschen Spoiler ein-/ausgeblendet.

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Antworten

#10 | RE: Spoiler-Button (Update) datum

09.01.2011 19:54 (zuletzt bearbeitet: 10.01.2011 07:56)

Hallo Florian,
besten Dank für die Anwort.
Mit den "Div's" im JavaScript funktioniert es. Leider verursachen sie immer einen Zeilenumbruch.

+ Ich habe mir vorgestell, dass der Anfangsbuchstabe den Ausblendeffekt auslöst.
+ Der ausgeblendete Text sollte ein Pluszeichen hinterlassen
+ Die Ausblendung sollte auch mitten im Text möglich sein
+ Die Einstellung sollte gespeichert werden

Hier das Script das nicht richtig funktioniert will:

- Der Text wird umgebrochen
- Ein Text zwischen den Ausblendungen wird ans Ende gesetzt

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Spoiler</title>

<script language="JavaScript" type="text/javascript">

function spoiler(me) {
var spoiler_obj = me.parentNode.parentNode.getElementsByTagName('span')[2];
if (spoiler_obj.style.display != 'block') {
spoiler_obj.style.display = 'block';
}
else {
spoiler_obj.style.display = 'none';
document.getElementById('me').innerHTML = '+'; // ???????
}}

</script>

</head>

<body>
<span><span><a title="Zum Ausblenden anklicken" style="color:#ff0000;float:left;font-weight:bolder;" onmouseover="this.style.cursor='pointer';" onclick="spoiler(this);">D</a></span><span></span>
<span style="display:block;">er Text oder die Tabelle</span></span>

Test 1

<span><span><a title="Zum Ausblenden anklicken" style="color:#ff0000;float:left;font-weight:bolder;" onmouseover="this.style.cursor='pointer';" onclick="spoiler(this);">D</a></span><span></span>
<span style="display:block;">er Text oder die Tabelle</span></span>

Test2

</body>
</html>

Was ist falsch an dem Script?

Mit besten Dank im Voraus
Wolfgang

Forum: Der Treffpunkt für Hilfe, Tricks & Tipps

Antworten

#11 | RE: Spoiler-Button (Update) datum

11.01.2011 00:45 (zuletzt bearbeitet: 11.01.2011 00:47)

florian-zier

Administrator

Informationen anzeigen

Beitr�ge:	837
Punkte:	1895
Registriert seit:	19.04.2007
Wohnort:	Oberkirch

Hallo Wolfgang,
ich sch�tze, dass ich etwas in die Richtung habe.

Also erstmal, falls ich das nun richtig verstanden habe, das finde ich eine super Idee.
Evtl. kann man dies auch in umgekehrter Variante irgendwie einsetzen, dass man erst Textteile aufklappen muss, wenn man sie will, eine Art Mini-Spoiler eben.

Ich habe inzwischen auch ein kleines Beispiel hier im Forum eingebaut, um die Funktion einmal zu demonstrieren.
Das Skript und der Style habe ich ausgelagert, um die L�nge des Forencodes in der Administration nicht zu lang f�r das Textfeld werden zu lassen, au�erdem kann ich so das Aussehen jederzeit ohne Forencodes anzufassen ver�ndern.

Du ben�tigst zum Einbau einen "Erweiterten Forencode":

1
2
3
 
[spoil=
...
+{{text}}]
 

1
2
3
 
<span><span onclick="spoiler_text(this);" onmouseover="this.style.cursor='pointer';" title="Zum Ausblenden anklicken" class="spoiler_text_link">
...
<font></font></span><span class="spoiler_text_content" style="display:inline;">{{text}}</span></span>
 

In einem Beitrag kannst du dies nun folgenderma�en einbinden (Beachte das kleine "+" als Trennzeichen, optional auch ein anderes Zeichen...):

1
2
3
 
[spoil=ANFANGSBUCHSTABE+AUSGEBLENDETER_TEXT]
 
 [spoil=B+eispiel hier im Forum...]
 

Aber beachte:
Das "+" als Trennzeichen im Forencode ist nur geschmackssache und sagt, wie man den Foren-Code schreiben muss.
Blendet man den Text aus, erscheint auf jeden Fall ein "+" hinter dem Anfangsbuchstaben.
�ndern kannst du die Einblendung hinter dem Buchstaben in folgender Skript-Zeile:

1
 
me.getElementsByTagName('font')[0].innerHTML = '+';

Setze z.B. den HTML-Code eines kleinen Bildchens da ein.
Ich habe es kurz ausprobiert, fand aber ein Bild als zu "globig" und st�rend, ein "+"-Zeichen ist angenehmer anzusehen. (Geschmackssache )

Diese Variante erf�llt nun folgende Bedingungen:
+ Anfangsbuchstabe blendet den Text aus.
+ Ein "+"-Zeichen wird dem Buchstaben angeh�ngt.
+ Kein Umbruch mitten im Text (HTML-Codes m�ssen dazu in einer Zeile direkt aneinander stehen bleiben! - doof, ist aber so)
+ Textstellen innerhalb des Absatzes k�nnen nahtlos mittendrin ausgeblendet werden.

- Einstellung wird nicht gespeichert.

Der Speicherung stehe ich nach wie vor skeptisch gegen�ber.
Manuell IDs zu vergeben finde ich zu aufwendig und auch zu fehleranf�llig.
Autom. k�nnen sie auch nicht vergeben werden, erg�ben auch nur Probleme bei neuen oder gel�schten Beitr�gen.
Man m�sste sie fast an deren Inhalt unterscheiden.
Das Cookie w�rde aber viel zu stark aufgebl�ht.
Und bei jedem Seitenstart zu pr�fen, w�rde das Forum nur unn�tig ausbremsen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Spoiler</title>
 
<script language="JavaScript" type="text/javascript">
function spoiler_text(me) {
	var spoiler_obj = me.parentNode.getElementsByTagName('span')[1];
	if (spoiler_obj.style.display != 'inline') {
		spoiler_obj.style.display = 'inline';
		me.getElementsByTagName('font')[0].innerHTML = '';
		me.title = 'Zum Ausblenden anklicken';
	}
	else {
		spoiler_obj.style.display = 'none';
		me.getElementsByTagName('font')[0].innerHTML = '+';
		me.title = 'Zum Einblenden anklicken';
	}
}
</script>
<style type="text/css">
.spoiler_text_link {
	color:#ff0000;
	font-weight:bolder;
	border-bottom:1px dotted red;
}
.spoiler_text_content {
	border-bottom:1px solid red;
}
</style>
 
</head>
 
<body>
 
Dies ist ein
<span><span onclick="spoiler_text(this);" onmouseover="this.style.cursor='pointer';" title="Zum Ausblenden anklicken" class="spoiler_text_link">T<font></font></span><span class="spoiler_text_content" style="display:inline;">est-Text, der ausgeblendet werden kann.</span></span>
Weitere Text-Teile dazwischen
<span><span onclick="spoiler_text(this);" onmouseover="this.style.cursor='pointer';" title="Zum Ausblenden anklicken" class="spoiler_text_link">s<font></font></span><span class="spoiler_text_content" style="display:inline;">ind auch kein Problem,</span></span>
genauso wie danach.
 

</body>
</html>
 

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Antworten

#12 | RE: Spoiler-Button (Update) datum

11.01.2011 20:22 (zuletzt bearbeitet: 13.01.2011 23:38)

florian-zier

Administrator

Informationen anzeigen

Beitr�ge:	837
Punkte:	1895
Registriert seit:	19.04.2007
Wohnort:	Oberkirch

Hier habe ich nun noch einen Quellcode, bei dem der ausblendbare Text nur beim Hovern unterstrichen wird:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Spoiler</title>
 
<script language="JavaScript" type="text/javascript">
function spoiler_text(obj) {
	var spoiler_obj = obj.parentNode.getElementsByTagName('span')[1];
	if (spoiler_obj.style.display != 'inline') {
		spoiler_obj.style.display = 'inline';
		obj.getElementsByTagName('font')[0].innerHTML = '';
		obj.title = 'Zum Ausblenden anklicken';
	}
	else {
		spoiler_obj.style.display = 'none';
		obj.getElementsByTagName('font')[0].innerHTML = '+';
		obj.title = 'Zum Einblenden anklicken';
	}
}
function spoiler_text_mouseover(obj) {
	obj.style.cursor = 'pointer';
	obj.parentNode.getElementsByTagName('span')[1].style.borderBottom =  '1px solid red';
		
}
function spoiler_text_mouseout(obj) {
	obj.parentNode.getElementsByTagName('span')[1].style.borderBottom =  'inherit';
}
</script>
<style type="text/css">
.spoiler_text_link {
	color:#ff0000;
	font-weight:bolder;
	border-bottom:1px dotted red;
}
.spoiler_text_content:hover {
	border-bottom:1px solid red !important;
}
</style>
 
</head>
 
<body>
 
Dies ist ein
<span><span onclick="spoiler_text(this);" onmouseover="spoiler_text_mouseover(this);" onmouseout="spoiler_text_mouseout(this);" title="Zum Ausblenden anklicken" class="spoiler_text_link">T<font></font></span><span class="spoiler_text_content" style="display:inline;">est-Text, der ausgeblendet werden kann.</span></span>
Weitere Text-Teile dazwischen
<span><span onclick="spoiler_text(this);" onmouseover="spoiler_text_mouseover(this);" onmouseout="spoiler_text_mouseout(this);" title="Zum Ausblenden anklicken" class="spoiler_text_link">s<font></font></span><span class="spoiler_text_content" style="display:inline;">ind auch kein Problem,</span></span>
genauso wie danach.
 
 
</body>
</html>
 

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Antworten

#13 | RE: Spoiler-Button (Update) datum

13.01.2011 09:26 (zuletzt bearbeitet: 13.01.2011 09:28)

Hallo Florian,
einfach Klasse, was so möglich ist!!!

Viele Grüße und besten Dank für Deine umfangreiche Hilfe
Wolfgang

Forum: Der Treffpunkt für Hilfe, Tricks & Tipps

Antworten

#14 | RE: Spoiler-Button (Update) datum

19.01.2011 22:49 (zuletzt bearbeitet: 19.01.2011 22:52)

florian-zier

Administrator

Informationen anzeigen

Beitr�ge:	837
Punkte:	1895
Registriert seit:	19.04.2007
Wohnort:	Oberkirch

Hier gibt es nun nochmal eine leicht �berarbeitete Version.
Sie ist nun nicht mehr unbedingt von einem Doctype abh�ngig.

Au�erdem wurde ein kleiner Bug behoben, durch den im IE ohne Doctype-Angabe der Text beim Hovern des Anfangsbuchstabens die Unterstreichung bestehen blieb und evtl. aber auch nicht beim Hovern des Textes gesetzt wurde.
Danke daf�r auch noch an Wolfgang, der dies entdeckt und auch gleich behoben hat.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Spoiler</title>
 
<script language="JavaScript" type="text/javascript">
function spoiler_text(obj) {
	var spoiler_obj = obj.parentNode.getElementsByTagName('span')[1];
	if (spoiler_obj.style.display != 'inline') {
		spoiler_obj.style.display = 'inline';
		obj.getElementsByTagName('font')[0].innerHTML = '';
		obj.title = 'Zum Ausblenden anklicken';
	}
	else {
		spoiler_obj.style.display = 'none';
		obj.getElementsByTagName('font')[0].innerHTML = '+';
		obj.title = 'Zum Einblenden anklicken';
	}
}
function spoiler_text_mouseover(obj) {
	obj.style.cursor = 'pointer';
	obj.parentNode.getElementsByTagName('span')[1].style.borderBottom =  '1px solid red';	
}
function spoiler_text_mouseout(obj) {
	obj.parentNode.getElementsByTagName('span')[1].style.borderBottom =  'inherit';
}
</script>
<style type="text/css">
.spoiler_text_link {
	color:#ff0000;
	font-weight:bolder;
	border-bottom:1px dotted red;
}
</style>
 
</head>
 
<body>
 
 
Dies ist ein
<span><span onclick="spoiler_text(this);" onmouseover="spoiler_text_mouseover(this);" onmouseout="spoiler_text_mouseout(this);" class="spoiler_text_link" title="Zum Ausblenden anklicken!">T<font></font></span><span onmouseover="spoiler_text_mouseover(this);" onmouseout="spoiler_text_mouseout(this);" class="spoiler_text_content" style="display:inline;" title="Zum Ausblenden markierten Anfangsbuchstaben klicken!">est-Text, der ausgeblendet werden kann.</span></span>
Weitere Text-Teile dazwischen
<span><span onclick="spoiler_text(this);" onmouseover="spoiler_text_mouseover(this);" onmouseout="spoiler_text_mouseout(this);" class="spoiler_text_link" title="Zum Ausblenden anklicken!">s<font></font></span><span onmouseover="spoiler_text_mouseover(this);" onmouseout="spoiler_text_mouseout(this);" class="spoiler_text_content" style="display:inline;" title="Zum Ausblenden markierten Anfangsbuchstaben klicken!">ind auch kein Problem,</span></span>
genauso wie danach.
 
 
</body>
</html>
 

Die Pseudoklasse ":hover" wird nun nicht mehr unbedingt ben�tigt.

Zum Schluss noch ein kleines Beispiel zum Quellcode.

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Antworten

Aktuelle Tagesansicht und Jahresansicht direkt aufrufen � � Online-Liste anzeigen

�hnliche Themen

Antworten

Letzter Beitrag

Spoiler mit gegenseitiger Auslösung
Erstellt im Forum Ideen f�r Skripte und sonstige Quellcodes von Wolfgang 4 23.12.2014 23:09
Wolfgang • Zugriffe: 677
Spoiler seitenübergreifend öffnen
Erstellt im Forum Ideen f�r Skripte und sonstige Quellcodes von Wolfgang 2 21.09.2013 00:09
Wolfgang • Zugriffe: 678
spoiler, bilder, aufzählungszeichen
Erstellt im Forum Ideen f�r Skripte und sonstige Quellcodes von Movert 6 22.04.2012 20:00
florian-zier • Zugriffe: 831
"Für Beitrag bedanken"-Button (next Generation)
Erstellt im Forum Funktionen & Template von florian-zier 41 26.07.2015 17:39
DJ-Frechdax • Zugriffe: 3720
Spoiler mit Cookies
Erstellt im Forum Funktionen & Template von Wolfgang 7 24.05.2011 16:11
florian-zier • Zugriffe: 1144
"Bei User bedanken"-Button
Erstellt im Forum Funktionen & Template von florian-zier 8 02.07.2011 00:10
florian-zier • Zugriffe: 1154
"Thread Melden"-Button ins Forum einbinden
Erstellt im Forum Funktionen & Template von florian-zier 10 29.08.2008 18:46
Ben • Zugriffe: 2131
Verfügbare Quellcodes
Erstellt im Forum Xobor (Homepagemodules & Dynamicboard) von florian-zier 0 16.01.2008 22:36
florian-zier • Zugriffe: 1924
Spoiler-Funktion
Erstellt im Forum Funktionen von florian-zier 0 11.12.2007 15:15
florian-zier • Zugriffe: 1310

Bitte geben Sie einen Grund f�r die Verwarnung an