Am Look fuer diese Knoepfe hab ich relativ lange gefriemelt. Die Idee dazu ist so nach und nach in mir herangereift.

Jede Schaltflaeche besteht aus 2 Schichten. Die oberste Schicht ist ein halbtransparentes PNG-Bild, das fuer den Rand, die gelbe Farbe und den 3D-Effekt zustaendig ist. Darunter befindet sich als zweite Schicht ein Bild von einem rostigen Blech, dass ich mit meinem Telefon geknipst habe ( + Saettigung und Unschaerfefilter ).

Dieses Rostbild kann ich per background-position verschieben und erhalte so mit einmaligem Enwicklungsaufwand und ohne weiteres Pixelgeschubse unterschiedlich verwitterte Knoeppe soviel ich will.

Wer einen InternetExplorer ohne PNG-Transparenz-Unterstuetzung benutzt (<=IE6) ist sowieso zu bemitleiden, aber hier sieht er wenigstens die Knoeppe. Allerdings ohne den Rost dahinter.

Ich bin immernoch begeistert, wie gut das ganze selbst mit dem IE 5.5 funktioniert. Diese script.aculo.us-Bibliothek ist wirklich erstaunlich.

Im geschlossenen Zustand konnte man den Verschiebeknopf beim verschieben durch schnelle Bewegungen der Maus zum verschwinden bringen, da er "onmouseout()" ausgeblendet wurde.

Das draggable-Objekt bringt starteffect und endeffect mit. Diese benutze ich um eine Variable mit true oder false zu belegen, um das Ausblenden ggf. zu unterbinden.