Spoiler ein Bild geben

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • Spoiler ein Bild geben

    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.

    Source Code

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


    LG

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

    Source Code

    1. <div class="spoiler">
    2. <div class="smallfont">
    3. <input class="button" value="Text, wnen er geschlossen ist." style="margin-left: 15px; padding: 0px; width: 160px; font-size: 10px;" onclick="if
    4. (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {
    5. this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Text,w enn er offen ist.';
    6. } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = '';
    7. this.value = 'Text,w enn er einmal geöffnet und wieder geschlossen worden ist.'; }" type="button">
    8. </div>
    9. <div class="alt2">
    10. <div style="display: none;">
    11. <img src="http://www.easy-coding.de/wcf/icon/blogM.png" alt="" />
    12. </div>
    13. </div>
    14. </div>
    Display All
  • ... 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?;)
  • 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:

    Source Code

    1. <div style="margin:20px; margin-top:5px;">
    2. <div class="smallfont" style="margin-bottom:2px; width:852; height:26; "><right><font color="red"><b>&nbsp;</b></font></right>
    3. <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'; }">
    4. </div>
    5. <div class="alt2" style="margin: 0px; padding: 0px; border: 1px inset;">
    6. <div style="display: none;">
    7. <font color="#01DFD7" : size=4px >{param}</font>
    8. </div>
    9. </div>
    10. </div>

    ist dieser wunsch doch machbar?
    ich hoffe auf euer verständnis anfängern gegenüber und eure hilfe...vielen dank.
  • 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).