Spoiler ein Bild geben

Fipsi · 16. September 2010, 17:13

Hallo liebe Mitcoder,

ich hätte hier was mit einem Spoiler. Ehrlich gesagt, weiß ich nicht, auf welchem Scrpit er basiert, ich hab den über Goggle gefunden. Und Zwar hätte ich gerne, dass ich statt dem Text (ich hab reingeschrieben, wo was stehen muss) Bilder (im Internet hochgeladen) dort anzeigen lassen kann. Ich hab schon sehr viele code probiert, aber nciht den richtigen gefunden. Hoffentlich könnt ihr mir helfen. Hier einmal der Spoiler-Code.

Quellcode

<div class="spoiler">
<div class="smallfont">
<input class="button" value="Text, wnen er geschlossen ist." style="margin-left: 15px; padding: 0px; width: 160px; font-size: 10px;" onclick="if
(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Text,w enn er offen ist.';
} else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = '';
this.value = 'Text,w enn er einmal geöffnet und wieder geschlossen worden ist.'; }" type="button">
</div>
<div class="alt2">
<div style="display: none;">
Dert Text, der Angezeigt wird.
</div>
</div>
</div>

Alles anzeigen

LG

Fipsi

Florian · 16. September 2010, 18:57

Statt dem Button verwendest du eben einen img-Tag - wo ist dabei das Problem?

Fipsi · 17. September 2010, 06:29

hä? wie? Sry, bei mir musst ganz unten anfangen...^^ ich bin noch ein ziemlicher Anfänger^^

Torben Brodt · 17. September 2010, 19:58

du benötigst dazu nur HTML Kenntnisse.
Füge einfach ein Bild - statt dem Text ein: de.selfhtml.org/html/grafiken/einbinden.htm

Beispiel:

Quellcode

<img src="tanzmaus.png" alt="Tanzmaus">

Fipsi · 18. September 2010, 09:27

Ja, das weiß ich ja... aber ich mein, wie bind ich den ein, dass mir das Bild statt dem Button angezeigt wird? Weil bei mir steht dann nur der code da, hier mal ein Screenshot:

[Blockierte Grafik: http://data.fipsii.square7.ch/pic/spoiler.jpg]

Torben Brodt · 18. September 2010, 10:19

Du musst das Bild einfügen, wo "Dert Text, der Angezeigt wird." steht.
Beispiel:

Quellcode

<div class="spoiler">
<div class="smallfont">
<input class="button" value="Text, wnen er geschlossen ist." style="margin-left: 15px; padding: 0px; width: 160px; font-size: 10px;" onclick="if
(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Text,w enn er offen ist.';
} else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = '';
this.value = 'Text,w enn er einmal geöffnet und wieder geschlossen worden ist.'; }" type="button">
</div>
<div class="alt2">
<div style="display: none;">
<img src="http://www.easy-coding.de/wcf/icon/blogM.png" alt="" />
</div>
</div>
</div>

Alles anzeigen

Fipsi · 18. September 2010, 10:38

... ich will nicht, dass das Bild IM Spoiler ist, sondern dass das Bild anstat dem Spoilerbutton angezeigt wird... mom, ich versuchs anders zu erklären:

Wenn du den Code mal rauskopierst, speicherst und dann öffnest, dann siehst du den Spoilerbutton... ich will jetzt aber nicht, dass der häsliche, graue button angezeigt wird, sondern stattdessen ein Bild, das ich gemacht und hochgeladen hab...
jetzt besser verstanden?;)

Torben Brodt · 18. September 2010, 14:19

auch egal

Dann ersetze eben <input class="button" durch <img src="http://www.easy-coding.de/wcf/icon/blogM.png"

Fipsi · 18. September 2010, 19:36

hätt ich ja auch draufkommen können [Blockierte Grafik: http://forum.sfgame.de/images/icons/icon3.gif]
Thx, danke dir

dereppsteiner · 21. Juli 2014, 16:45

hallo meine lieben,
ich möchte gern dieses thema noch eimal auffrischen und euch um hilfe bitten.
ich nutze nun auch den hier im thread geposteten spoiler.
soweit ist es ja auch verständlich erklärt worden und funktioniert super.
da ich aber diese funktion für sehr lange texte verwende möchte ich diese funktion noch etwas verfeinern, komme aber nicht zum ziel.
nachdem der text nun per klick auf das eingefügte bild aufklappt, möchte ich gern , das ein weiteres bild am ende des textes erscheint und bei dessen klick dann der text wieder schließt.
hier noch einmal mein auszug des codes:

Quellcode

<div style="margin:20px; margin-top:5px;">
<div class="smallfont" style="margin-bottom:2px; width:852; height:26; "><right><font color="red"><b> </b></font></right>
<img src="http://mein_server /Spoiler.png" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'ausblenden'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'einblenden'; }">
</div>
<div class="alt2" style="margin: 0px; padding: 0px; border: 1px inset;">
<div style="display: none;">
<font color="#01DFD7" : size=4px >{param}</font>
</div>
</div>
</div>

ist dieser wunsch doch machbar?
ich hoffe auf euer verständnis anfängern gegenüber und eure hilfe...vielen dank.

dereppsteiner · 23. Juli 2014, 17:49

schade , ist vielleicht das falsche board um rat und tips zu bekommen.

Airfrischung · 24. Juli 2014, 20:18

Es ist nur traurig, dass in 4 Jahren bei dir anscheinend nichts passiert ist.

dereppsteiner · 26. Juli 2014, 23:13

Airfrischung schrieb:

Es ist nur traurig, dass in 4 Jahren bei dir anscheinend nichts passiert ist.

ohne das wir uns kennen,sag ich mal eben ganz frech .......................[Blockierte Grafik: https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTzbZdFC8bw2JJ8OxuwNU7saLwh4dtph9Jl7LsP5NpSab16sTpR].....................

Airfrischung · 27. Juli 2014, 13:35

Ich helfe gerne Leuten, die lernen wollen. Nicht aber Leuten, die sich 1x alle 4 Jahre melden und Sachen fertiggestellt haben wollen. Und dann noch fremde Leute beleidigen, weil sie selbst so inkompetent sind und es nicht einsehen wollen.

Ein schönes Leben noch.

dereppsteiner · 29. Juli 2014, 13:38

@Airfrischung
muß das mal klar zu stellen.

1. habe ich mich hier zum ersten mal neu angemedet
2. habe um rat gefragt und nicht darum gebettelt etwas vorgekaut zu bekommen
3. wer hat hier wohl angefangen wen zu beleidigen ?

Schlussfolgerung: Idioten wie dir sollte es lieber verwehrt bleiben in solchen boards überhaupt etwas zu sagen zu haben!

freeek · 3. August 2014, 23:06

Klärt das draußen auf dem Spielplatz wer höher schaukeln kann.

@dereppsteiner: Soll ich das für dich bei Google eintippen oder möchtest du? Wenn ich Google nach "Javascript Spoiler Code" frage bekomme 1,1 Mio Resultate. Klick einen der ersten 5 Links an und du hast deine Lösung (Ich trau dir soviel HTML-Kenntnisse jetzt einfach mal zu).

Spoiler ein Bild geben

Spoiler ein Bild geben

Quellcode

Quellcode

Quellcode

Quellcode

Airfrischung schrieb:

Teilen

Benutzer online 5

Tags