nicht angemeldet
Das funktioniert alles einwandfrei, nur möchte ich den Übergang nicht mit einem Schlag, sondern sanft ablaufen lassen.
Nach langem "Googeln" habe ich diverse Lösungen entdeckt, allerdings nicht mit javascript!
Eine Überblendung per se gibt es seitens CSS nicht. Du wirst zwei Bilder übereinander legen und das jeweils obere mittels der opacity-Eigenschaft ausblenden müssen, so dass das untere zum Vorschein kommt. Den Überlendungsvorgang erreichst du, indem du per setTimeout() oder setInterval() opacity Stück für Stück reduzierst.
Da das Ganze etwas umfangreicher ist und du es browserübergreifend haben möchtest, rate ich dir dringend, auf eine Javascript-Bibliothek zurückzugreifen, Scriptaculous oder JQuery beispielsweise. Sie stellen dir Funktionen zur Verfügung, um Elemente schnell und einfach zu erstellen und einzufügen (JQuery: append()), zu positionieren (offset() und CSS-left/right) und eine Animation, also das Ausblenden (fadeOut()) vorzunehmen.
Das sind drei Funktionsaufrufe und ich behaupte jetzt mal, insgesamt fünf, sechs Zeilen sollten auf diesem Wege ausreichen.
Am sinnvollsten wäres es IMHO, ein neues <img> mittels position:absolute, entsprechendem left/right und dem alten Bild über dem bestehenden <img> abzulegen, dann im bestehenden <img> das neue Bild einzusetzen und abschließend das neue <img> auszublenden und wieder zu entfernen.