nicht angemeldet
Jetzt möchte ich die beiden Links gegen 2 Zeichen austauschen nämlich mit 2 Pfeilen. Die Grundstellung sollte ein Pfeil sein der nach Rechts zeigt, also geschlossener Zustand, beim Klick (onclick) soll dieses Zeichen und gleichzeitig der Link ausgetauscht werden mit dem Pfeil der nach unten zeigt.
Es sollte immer der aktuelle Zustandt mit dem Pfeil dargestellt werden (offen oder geschlosse)
Bilder kannst du im HTML als http://de.selfhtml.org/html/grafiken/einbinden.htm@title=img-Element oder im CSS als http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_image@title=background-image einbinden.
Per JavaScript kannst du nichts anderes machen, als diese eingebundenen Bilder ändern. Wie gesagt würde sich *eine* Hintergrundgrafik anbieten, die beide Status in sich vereint. Du musst dann nur die <http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_position@title=Position der Hintergrundgrafik> anpassen, sodass ein anderer Teil zu sehen ist, der dann eben den Pfeil nach unten enthält. Das nennt sich CSS Sprites.
Diese Logik verlagerst du am besten ins CSS, sodass du im JavaScript nur eine Klasse setzen musst. Als Beispiel:
.toggle,
.toggle-highlight {
background-image: url(./img/toggle.png);
}
.toggle {
background-position: left top;
}
.toggle-highlight {
background-position: left -20px;
}
toggle.png enthält also beide Pfeile mit etwas Abstand, der zweite wird sichtbar, wenn die Grafik um 20px nach oben herausgeschoben wird (fiktiver Wert).
Im JavaScript wechselst du nun bloß http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#universaleigenschaften@title=className aus, indem du die Klasse beim Aufklappen auf toggle-highlight setzt und beim Zuklappen zurück auf toggle.
Mathias
Gunnar Bittersmann