Accordioneffekt auf Bilder übertragen

[technic]

Hallo Leute,

vielleicht könnt ihr mir da weiterhelfen. Ich poste dieses Thema hier, weil ich mit Dreamweaver arbeite(n möchte) :-). Ich nehme an, den meisten sagt http://mootools.net und deren Accordeoneffekt etwas (Zum besseren Verständnis hier der direkte Link zu dem Effekt http://demos.mootools.net/Accordion)

Wenn man hier auf den Link History klickt, fährt ja ein Textfeld auf. Ich möchte nun diesen Effekt anwenden, aber statt des Textes (z.B. Link: history), soll ein Bild angeklickt werden um dann ein Textfeld zu öffnen.

Ich muss nun gestehen, dass ich mich mit java etc. überhaupt nicht auskenne, aber meist erklärt sich das Ganze ja von selbst.

Folgendes:
1. Ich habe in der Demo von mootools mehrere Dateien, darunter demo.css, demo.js und die index.html:
In der css-Datei ändere ich nichts, da dies ja nur die "Formatierungen" für die verschiedenen Elemente sind.

2. Dann ist da noch die demo.js, von der ich annehme, dass man hier die einzelnen Aufgaben der Befehle definieren kann.

Hier ein Ausschnitt:
var myAccordion = new Accordion($('accordion'), 'h3.toggler', 'div.element', {
opacity: false,
onActive: function(toggler, element){
toggler.setStyle('color', '#41464D');
},
onBackground: function(toggler, element){
toggler.setStyle('color', '#528CE0');
}
});

Ich entnahm dem Quelltext ja nun, dass h3 die Überschrift definiert, richtig? In der js-Datei wird an den Befehl ein toggler gehängt. Damit macht man erkenntlich, dass etwas passieren soll, nehme ich an. Das folgere ich aus dem Begriff "function". D.h. in der Datei demo.js steht nun:'h3.toggler'

Aber das Problem ist ja, dass ich gar keine h3-Überschrift habe, sondern ein Bild.

Meine Vorstellung ist es nun, statt der verschiedenen h3-Überschriften 3 Bilder einzubauen, die beim Klicken ein Textfeld öffnen.
Kann mir das jemand für dummies erklären?

Wäre unendlich dankbar.
Viele Grüße,

technic

PS: Zum Verständnis ist anbei die Accordion.zip mit allen relevanten Dateien. Ich hoffe, mootools hat da nix gegen.

[wildmieze]

Ohne jetzt großartig irgendwas überprüft zu haben: schon versucht, einfach ein Bild IN den H3-tag zu setzen ..?

[webcreate]

Wer sagt denn das ein h3-Tag kein img-Tag enthalten darf?
Laut Validierung mit XHTML 1.0 Strict mault er es nicht an.

<h3 class="toggler"><img src="test.jpg" alt="h1" height="50" width="50" /></h3>

[webcreate]

Ohhh, wenn man hier local zu viel testet ... dann ist die wildmieze schneller.

[technic]

:-) also das mit dem Bild hat funktioniert. Vielen, vielen Dank.

In der demo.js hab ich folgenden Abschnitt gefunden:

var toggler = new Element('h3', {
'class': 'toggler',
'html': 'Common descent'
});

Hier muss ich den Abschnitt definieren, der erscheinen soll, wenn ich auf das Bild klicke, oder?
Wie markiere ich denn den Abschnitt, der "auffahren" soll. Mach ich das direkt in dem html Dokument oder in der demo.js Datei?

[technic]

Hallo Leute,

ich nochmal.
Also erst mal vielen Dank für eure Hilfe. Hat bisher alles gut funktioniert und ich hoffe, ich kann euch bald das Ergebnis zeigen.

Nun habe ich noch eine Frage:
Wenn ihr euch die Beispielseite anschaut, seht ihr ja, dass einer von den Links schon beim Start der Seite (http://demos.mootools.net/Accordion) aktiviert ist. Bei der Beispielseite ist der Button History schon aktiviert und der Text sofort lesbar. Kann man das denn so einstellen, dass kein (beschreibender) Text dabei steht, man also beim Start der Seite nur die Links "History", "Evidence of universal common descent" und "Examples of common descent" da stehen und erst beim Klick das Textfeld auffährt?

Ich hoffe, ihr vesteht, was ich meine. :-)

Viele Grüße
technic