Spoilerfunktion und Grafik nach Link für Webseite

  • Spoilerfunktion und Grafik nach Link für Webseite

    Hallo, ich habe eine Frage.

    Ich habe hier den Code für die Spoilerfunktion...ich finde es irgendwie umständlich jedesmal den ganzen code zu verwenden und wollte wissen, ob es möglich ist auch einen spoiler mit
    Spoiler anzeigen
    ...
    wie in foren auf meiner webseite zu erzeugen?

    Die Website ist in html mit css.

    Dann wollte ich noch fragen wie man eine Grafik nach einem Link automatisch anzeigen lässt (wie im Wbb3). Die Grafik sollte sich verändern wenn man mit der maus auf den link geht.



    Würde mich über Hilfe freuen. :)

  • Hi,
    wie sieht denn der Spoiler Code aus? Wenns eine CSS only Lösung ist, dann sollte es ja nicht viel mehr sein als
    <div class="spoiler">Spoiler</div>

    eine eigene Syntax wie
    Spoiler anzeigen
    bringst du html jedenfalls besser nicht bei.

    Zu deinem Menü Problem: z-index im IE?

    BTW: Beim nächsten mal bitte für 2 verschiedene Fragen auch 2 Themen eröffnen ;)

  • Der Spoiler Code sieht so aus:

    Quellcode

    1. <div><input type="button" value="spoiler" style="width: 80px; 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 = 'spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'spoiler'; }"></div><div><div style="display: none;">
    2. {TEXT1}</div></div>


    Auf die Idee es mit css zu lösen bin ich schon gekommen nur wüsste ich nicht wie das gehn sollte :huh:

    Der oben gegebene Link hat mir nicht wirklich geholfen :( Könntest du mir vielleicht mit einem Code Beispiel weiterhelfen wie ich die Grafik so nach dem Link einfügen kann?
    [Blockierte Grafik: http://img252.imageshack.us/img252/867/linkts2.jpg]


    PS: ok sorry, nächstes mal mache ich 2 threads :)

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von pimp.my.girl ()

  • pimp.my.girl schrieb:

    Der oben gegebene Link hat mir nicht wirklich geholfen :( Könntest du mir vielleicht mit einem Code Beispiel weiterhelfen wie ich die Grafik so nach dem Link einfügen kann?
    [Blockierte Grafik: http://img252.imageshack.us/img252/867/linkts2.jpg]
    HTML und CSS sind ja beide im Quelltext einsehbar. Schau mal in deine style-NR.css.
    Woltlab hat das so gemacht:

    Quellcode

    1. * a.externalURL{color:#154268}
    2. * a.externalURL:hover{color:#08f}
    3. .externalURL {background-image: url(../icon/externalURL.png);background-position: center right;background-repeat: no-repeat;margin-right: 3px;padding-right: 15px;}
    4. .externalURL:hover {background-image: url(../icon/externalURLHover.png);background-position: center right;background-repeat: no-repeat;}