[[ExiTuS]]

Hier (m)eine mögliche Lösung als fertiges Stück - etwas abgeändert vom Original dieses Threads.

CSS:

Code:

.spoiler_button {
background: url(images/buddy_offline.png) 0 50% no-repeat;
padding: 5px 15px;
}

MyCode:

Code:

<div class="spoiler_head" id="spoiler_head_$1"><a href="#" class="spoiler_button" id="spoiler_button_$1" value="" onclick="if (document.getElementById('spoiler_body_$1').style.display === 'none') { document.getElementById('spoiler_body_$1').style.display = 'block'; this.style.backgroundImage = 'url(images/buddy_online.png)' } else { document.getElementById('spoiler_body_$1').style.display = 'none'; this.style.backgroundImage = 'url(images/buddy_offline.png)' }">&nbsp;</a></div>
<fieldset class="spoiler_body" id="spoiler_body_$1" style="display: none">$2</fieldset>

Ersetze die Grafik nach Belieben und auch die px-Werte im CSS-Padding. Auch die restlichen Klassen kannst mit CSS frei formatieren.

[ExiTuS]

[itsmeJAY]

Löst das für Gerti wirklich folgende Problematik?

Ich möchte an Stelle der drei in Rot hervorgehoben Texte (zur besseren Darstellung bewusst auf die Code-Formatierung verzichtet) durch je eine eigene Grafik ersetzen.

[Gerti]

@[ExiTuS] 
Danke für Deine Bemühungen. Leider funktioniert es noch nicht so ganz wie gewünscht.

Anmerkung: Du hast sicherlich nur übersehen, dass die Variable "$1" (Doppelpunkt ist zu vernachlässsigen) ist analog der Bezeichnung "$2" eine Textvariable darstellt.
$1 = Spoilerüberschrift
$2 = Spoilerinhalt
Daraus ergibt sich die für den User einzugebene Vorgabe:
Spoiler mit Überschrift = [sp=$1]$2[/sp]

In Deiner definierten Vorlage wird die von mir (siehe nochmals hier) definierte Überschrift "$1" versehentlich nicht gesetzt (sondern als id="spoiler_head_$1 bzw. id="spoiler_body_$1 definiert), die Grafik unter (statt daneben) dem Platz der Überschrift "$1" gesetzt und wird nach Anklicken teilweise (ca. 50%) durch "$2"  verdeckt.

Zumindest ist man schon einen Schritt näher an die gewünschte Lösung gerückt.