Texte, Sätze und Bilder mit einem Klick aus- und einblenden!

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages � Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps � Texte, Sätze und Bilder mit einem Klick aus- und einblenden!

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News! Stellen Sie Ihr eigene Webseite vor! Betriebssystem MS Windows & andere Betriebssysteme Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps MS Windows 11, 10, 8 und 7 - Fragen & Antworten Linux, Ubuntu und andere Betriebssysteme �rger mit dem PC, Laptop oder Tablet? �rger mit dem PC, Laptop oder Tablet - Vorbeugung und Hilfe �rger mit dem PC, Laptop oder Tablet - Fragen & Antworten Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten Das neue Template Xobor (v6) Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie Wasserstoff - Energietr�ger der Zukunft. Die besten Links Empfehlenswerte und interessante Links! Link - Suche Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones Lob, Kritik & Verbesserungsvorschl�ge Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit Alles, was noch so �brig bleibt Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel

#1 | Texte, Sätze und Bilder mit einem Klick aus- und einblenden! datum

18.01.2011 20:38 (zuletzt bearbeitet: 18.08.2022 23:23)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3453
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1317

Texte, Sätze und Bilder mit einem Klick ausblenden - Teil 1!
Aktualisiert 18.08.22

Um eine bessere Übersicht und Verständlichkeit in großen Dokumenten zu ermöglichen ist es sinnvoll Bilder und Texte manuell auszublenden!
Das trifft für bereits gelesene oder gesehene Elemente zu!

Das Script:

  • Mit dem folgenden Script ist es möglich Wörter,Textstellen, Textblöcke und Bilder mit einem Mausklick auszublenden!
  • Hierbei wird der vorgegebenen Textfluss nicht verändert!
  • Die Auslösung und die Ausblendung kann angepasst werden!
  • Als praktisch erweist sich eine Veränderung der Transparenz!
  • Eine Unterstreichung oder eine Veränderung der Schriftfarbe ist auch möglich!
  • Als Platzhalter für die Ausgeblendeten Elemente erweist sich eine Grafik recht gut (

Eigenschaften:

  • Es entsteht kein ungewollter Zeilenumbruch!
  • Die Auslösung kann durch einen Buchstaben, ein Wort, ein Satz oder ein Bild erfolgen!
  • Aus- und Einblendung erfolgen durch einen Mausklick!
  • Ausblendung werden beim Überfahren mit der Maus durch verändern der Transparenz angezeigt!
  • Die Auslösungen sind mit Tooltipps versehen und ändern sich passend zur Ausblendung!
  • Die Ausblendung und die Auslösung sind formatierbar!
  • Funktioniert in allen gängigen Browsern!

Hier das komplette HTML-Script:

  • In Zeile 12 wird eine mögliche Ausblendung beim Mouseover eingegraut!
  • Zusätzliche Markierungen durch Unterstreichung oder Schriftänderung erfolgt in Zeile 11 !

  • Im Beispiel 1 wird der Text in Zeile 25 durch ein Klick auf den Text ausgeblendet!
  • Im Beispiel 2 wird die Grafik in Zeile 36 durch ein Klick auf sich selbst ausgeblendet. Mit Text vor und hinter der Grafik!
  • Im Beispiel 3 stehen in Zeile 47+53 zwei Grafiken nebeneinander die durch ein Klick auf sich selbst ausgeblendet werden. Ohne Text vor und hinter der Grafik!

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Texte und Bilder komfortabel ausblenden!</title>
</head>
<body>
 
<style>
.spoiler_allg {display:inline-block; cursor:pointer;}
.spoiler_object {font-style: oblique; color:#2222BB;}
.spoiler_object:hover {opacity:0.4; filter:alpha(opacity=40);}
.spoiler_pin, .spoiler_minus {display:none;}
.spoiler_pin img {width:20px;}
.spoiler_plus {display:block;}
</style>
 

<!-- Beispiel 1 -->
<br><br>
<b>Beispiele 1:</b><br>
    Text davor! 
<div class="spoiler_allg"><div class="spoiler_pin"></div><div class="spoiler_object">
 
    Dieses ist ein Text, der ausgeblendet werden kann!
 
</div></div>
    Text danach!
<br><br><br>
 
<!-- Beispiel 2 -->
<b>Beispiele 2:</b><br>
    Text davor! 
<div class="spoiler_allg"><div class="spoiler_pin"></div><div class="spoiler_object">
 
    <img style="width:170px;" src="https://files.homepagemodules.de/b104774/f46t1197p2704n73_hQSvHBWg.jpg">
 
</div></div>
    Text danach!
<br><br><br>
 
<!-- Beispiel 3 -->
<b>Beispiele 3:</b><br>
 
<div class="spoiler_allg"><div class="spoiler_pin"></div><div class="spoiler_object">
 
    <img style="width:170px;" src="https://files.homepagemodules.de/b104774/f46t1197p2704n73_hQSvHBWg.jpg">
 
</div></div>
 
<div class="spoiler_allg"><div class="spoiler_pin"></div><div class="spoiler_object">
 
    <img style="width:170px;" src="https://files.homepagemodules.de/b104774/f46t1197p2704n73_hQSvHBWg.jpg">
 
</div></div>
 
<!-- Wenn jQuery nicht vorhanden ist die folgende Zeile freigeben -->
<!-- <script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script> -->
<script>
window.addEventListener('load', function(){
  $('.spoiler_allg').on('click',function(){
    $('.spoiler_object',this).toggleClass('spoiler_minus');
    $('.spoiler_pin',this).toggleClass('spoiler_plus').attr('title','Zum Einblenden anklicken!').html('<img src="https://files.homepagemodules.de/b104774/a_68_13268e07.png">');
  });
  $('.spoiler_object').attr('title','Zum Ausblenden anklicken!');
});
</script>
 
</body>
</html>
 

Schlie�en

Das Skript in Aktion:

Texte und Bilder komfortabel ausblenden!

Besten Dank an Florian
Bis dann und gutes Gelingen

Wolfgang

Das Thema wurde geschlossen..

#2 | Texte, Sätze und Bilder mit einem Klick einblenden! datum

24.01.2011 23:15 (zuletzt bearbeitet: 14.03.2019 18:50)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3453
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1317

Texte, Sätze und Bilder mit einem Klick einblenden - Teil 2!
Aktualisiert 18.08.22

Im zweiten Teil sind die auszublendenden Elemente bereits ausgeblendet!
Alle betroffene Textstellen und Bilder sind nicht zu sehen und durch Platzhalter angezeigt!
Dieses Script kann da zum Einsatz kommen, wo es um Fragen und Antworten geht.
Auch dort, wo nach und nach der komplette Text mit Bildern präsentiert wird, ähnlich einer PowerPoint Präsentation!

Das Script:

• Mit dem folgenden Script ist es möglich Wörter, Textstellen, Textblöcke und Bilder mit einem Mausklick, diesmal einzublenden!
• Als Platzhalter für die Ausgeblendeten Elemente erweist sich eine Grafik recht gut (

)!
• Auch hier gelten die gleichen Bedingungen, wie in Beitrag #1!

Eigenschaften:

  • Die Einblendungen erfolgen durch einen Mausklick auf den Platzhalter oder der markierten Textstelle!
  • Die markierte Textstelle und der Platzhalter sind auch hier mit Tooltipps versehen und ändern sich passend zur Einblendung!
  • Funktioniert in allen gängigen Browsern!

Hier das komplette HTML-Script:

  • In Zeile 9 wird die Ausblendung durch Transparenz bestimmt!
  • Mögliche Ausblendung durch Unterstreichung wird durch Auskommentierung in Zeile 10 oder Änderung der Schriftfarbe in Zeile 11 bestimmt!
  • Über Zeile 14 kann der Auszublendende Text noch spezieller formatiert werden!
  • In Zeile 19+20 kann die Auslösung noch zusätzlich formatiert werden (hier Schriftfarbe und Schriftstärke)!
  • In Zeile 34 ist die Grafik des Platzhalters eingetragen!

  • Im Beispiel 1 Zeile 51-55 ist ein Text ausgeblendet und kann über den Platzhalter oder das Wort "Dieses" eingeblendet werden!
  • Im Beispiel 2 Zeile 60-64 ist ein Text ausgeblendet und kann über nur über den Platzhalter eingeblendet werden!
  • Im Beispiel 3 Zeile 69-72 ist ein Bild ausgeblendet und kann ebenfalls nur über den Platzhalter eingeblendet werden!

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Texte und Bilder komfortabel ausblenden!</title>
</head>
<body>
 
<style>
.spoiler_allg {display:inline-block; cursor:pointer;}
.spoiler_object {display:none; font-style: oblique;color:#2222BB;}
.spoiler_object:hover {opacity:0.4; filter:alpha(opacity=40);}
.spoiler_pin, .spoiler_plus {display:block;}
.spoiler_pin img {width:20px;}
.spoiler_minus {display:none;}
</style>
 
<!-- Beispiel 1 -->
<br><br>
<b>Beispiele 1:</b><br>
    Text davor! 
<div class="spoiler_allg"><div class="spoiler_pin"></div><div class="spoiler_object">
 
    Dieses ist ein Text, der ausgeblendet werden kann!
 
</div></div>
    Text danach!
<br><br><br>
 
<!-- Beispiel 2 -->
<b>Beispiele 2:</b><br>
    Text davor! 
<div class="spoiler_allg"><div class="spoiler_pin"></div><div class="spoiler_object">
 
    <img style="width:170px;" src="https://files.homepagemodules.de/b104774/f46t1197p2704n73_hQSvHBWg.jpg">
 
</div></div>
    Text danach!
<br><br><br>
 
<!-- Beispiel 3 -->
<b>Beispiele 3:</b><br>
 
<div class="spoiler_allg"><div class="spoiler_pin"></div><div class="spoiler_object">
 
    <img style="width:170px;" src="https://files.homepagemodules.de/b104774/f46t1197p2704n73_hQSvHBWg.jpg">
 
</div></div>
 
<div class="spoiler_allg"><div class="spoiler_pin"></div><div class="spoiler_object">
 
    <img style="width:170px;" src="https://files.homepagemodules.de/b104774/f46t1197p2704n73_hQSvHBWg.jpg">
 
</div></div>
 

<!-- Wenn jQuery nicht vorhanden ist die folgende Zeile freigeben -->
<!-- <script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script> -->
<script>
window.addEventListener('load', function(){
  $('.spoiler_allg').on('click',function(){
    $('.spoiler_object',this).toggleClass('spoiler_plus').attr('title','Zum Ausblenden anklicken!');
    $('.spoiler_pin',this).toggleClass('spoiler_minus');
  });
  $('.spoiler_pin').attr('title','Zum Einblenden anklicken!').html('<img src="https://files.homepagemodules.de/b104774/a_68_13268e07.png">');
});
</script>
 
</body>
</html>
 

Schlie�en

Das Skript in Aktion:

Texte und Bilder komfortabel einblenden!

Besten Dank an Florian
Bis dann und gutes Gelingen

Wolfgang

Das Thema wurde geschlossen..

#3 | Texte und Bilder komfortabel aus- und einblenden! datum

26.05.2018 00:56 (zuletzt bearbeitet: 14.03.2019 18:53)

Texte und Bilder komfortabel aus- und einblenden!

Beide Beiträge #1 und #2 wurden aktualisiert!

Verwendung:
  • Diese Skripte können dort zum Einsatz kommen, wo es um Fragen und Antworten geht (Antworten sind ausgeblendet)!
  • Auch dort, wo nach und nach der komplette Text mit Bildern präsentiert wird, ähnlich einer PowerPoint Präsentation!
  • Um eine bessere Übersicht und Verständlichkeit in großen Dokumenten zu ermöglichen, können Textstellen und Bilder nach und nach ausgeblendet werden!

Die Skripte in Aktion:
• Texte und Bilder komfortabel ausblenden
• Texte und Bilder komfortabel einblenden

Wolfgang

Das Thema wurde geschlossen..

Eine Email an Freunde versenden! � � Auf einmal NOINDEX, NOFOLLOW Tags im Forum. Wie kann man das ändern?

�hnliche Themen

Antworten

Letzter Beitrag

Webseiten automatisch einblenden
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 0 24.05.2022 19:43
Wolfgang • Zugriffe: 494
Bilder drehen - In der Bildergalerie & In Beiträgen - Teil 1-5
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 17 05.06.2022 11:39
844er • Zugriffe: 6675

Bilder aus "Datei anhängen" mit einem Klick öffnen & schließen! - Für alle Templates! - Teil 1-4
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang

24.07.2024 11:08
von

Wolfgang • Zugriffe: 2661

Schlagschatten und Farbverlauf hinter Text und Bildern (auch mit fielset)
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Julia Ady Eden

13.02.2024 20:45
von

Anne • Zugriffe: 4760

Text und Bild nebeneinander ausrichten?
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Julia Ady Eden

25.07.2015 02:30
von

Julia Ady Eden • Zugriffe: 1163

Bild vergrössern
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Magister 4 10.01.2015 14:18
Magister • Zugriffe: 2065

Transparenz-Effekte - Text und Bilder auf transparenten Hintergrundbildern!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

29.05.2024 10:24
von

Wolfgang • Zugriffe: 2371

Bilder vergrößern per "Mouseover", mittels "CSS" oder "Tooltipps"
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

18.01.2020 17:44
von

Wolfgang • Zugriffe: 20330

TAB-Menü / TAB-Spoiler / Boxen für Texte und Bildern
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 20 28.10.2022 18:49
Daishi • Zugriffe: 14444

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 45 €

36%

Forum - Texte, Sätze und Bilder mit einem Klick aus- und einblenden!

Texte, Sätze und Bilder mit einem Klick ausblenden - Teil 1!
Aktualisiert 18.08.22

Texte, Sätze und Bilder mit einem Klick einblenden - Teil 2!
Aktualisiert 18.08.22

Texte und Bilder komfortabel aus- und einblenden!

Forum Lesezeichen ❌

Forum - Texte, Sätze und Bilder mit einem Klick aus- und einblenden!

Texte, Sätze und Bilder mit einem Klick ausblenden - Teil 1!Aktualisiert 18.08.22

Texte, Sätze und Bilder mit einem Klick einblenden - Teil 2!Aktualisiert 18.08.22

Texte und Bilder komfortabel aus- und einblenden!

Forum Lesezeichen ❌

Texte, Sätze und Bilder mit einem Klick ausblenden - Teil 1!
Aktualisiert 18.08.22

Texte, Sätze und Bilder mit einem Klick einblenden - Teil 2!
Aktualisiert 18.08.22