Ich wollte heute etwas bauen, das wie bei imageRollover (unter anderem) ein Element größen- und positionsgetreu durch ein anderes ersetzt. Da hätte ich also einfach den Code kopieren und in meine neue Klasse einfügen können, aber mit der Mootools-Philosophie im Hinterkopf kann man das eleganter lösen. Ich habe also zwei neue Funktionen in Element implementiert, die das Ersetzen übernehmen.

Benutzung:

element.replace(zuErsetzendesElement);

oder

zuErsetzendesElement.replaceWith(element);

Das ersetztende Element übernimmt alle Positionierungs-Styles vom zu ersetzenden Element und wird an seine Stelle ins Dokument gesetzt. Hier in Aktion. Diese Funktionen kann ich jetzt sowohl bei meinem alten imageRollover als auch in meinem neuen Script verwenden. Ich muss jetzt nur noch imageRollover so umbauen, dass es diese neue Funktion verwendet. Das wird dann der PTP-Post für nächste Woche.

Download:

Zu beachten ist noch, dass das zu ersetzende Element aus dem DOM entfernt, aber nicht gelöscht wird. Das bedeutet einerseits, dass man es bei bedarf bequem weiter verwenden kann, andererseits es aber auch per destroy() endgültig auslöschen sollte wenn man nicht mehr braucht. Sowohl replace() als auch replaceWith() geben das zu ersetzende Element (bzw. dann ja bereits ersetzte) Element zurück.