Spoiler ein Bild geben

  • 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.

    Quellcode

    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>
    Alles anzeigen


    LG

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

    Quellcode

    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>
    Alles anzeigen
  • ... 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:

    Quellcode

    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.