Sanfter Übergang bei onmouseover

[Gunds]

Ich möchte auf meiner Webseite ein "thumb.jpg" zeigen, wobei beim Überfahren desselben, das Bild GROSS angezeigt wird.
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! Ist dies denn überhaupt möglich, oder weiss jemand wie man dies bewerkstelligen kann, dass es auch auf diversen Browsern einwandfrei funktioniert?
Als autodidaktischer Anwender, wäre ich froh über eine detaillierte Erklärung, anstelle von "schaue doch bei xxxx.links!"
Herzlichen Dank für jeden Tipp.

  
<td class="Stil14">  
       <div style="float: left;"  
       class="img_caption left">  
       <img class="caption"  
       src="/gunds/bilder/thumb_ruestung_01.jpg"  
       onmouseover="this.src='/gunds/bilder/ruestung_01.jpg'"  
       onmouseout="this.src='/gunds/bilder/thumb_ruestung_01.jpg'"  
       align="top" border="0">  
       <p>R&uuml;stung 01</p>  
       </div>  
</td>  

[Frodo]

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.

[apsel]

Om nah hoo pez nyeetz, Gunds!

Als autodidaktischer Anwender, wäre ich froh über eine detaillierte Erklärung,

Die biete ich hier nicht.

anstelle von "schaue doch bei xxxx.links!"

SetTimeout ist dein Freund.

Matthias

[Encoder]

Als autodidaktischer Anwender, wäre ich froh über eine detaillierte Erklärung, anstelle von "schaue doch bei xxxx.links!"

Ich find teilweise einen guten Link schon auch was schönes. Auf einer gescheit gemachten Seite findest du oft ausführlichere Informationen als sie hier jemand schreiben kann.

Nachdem du ja schon einen Tip bekommen hast, hier noch ein Rat eines Anwenders. Mach die Effekte nicht zu langatmig. Beim Durchsehen von mehreren Bildern ist ein Effekt beim ersten mal noch cool und interessant. Beim fünften fängt er gern mal an zu nerven und beim zehnten schaut mal sich dann eben keine Bilder mehr an, wenn man jedes mal das selbe Geblinke und Gefummel zu sehen kriegt.

[Gunds]

Deine Kritik ist sicher eine Überlegung Wert.
Meine Idee war einfach die, dass anstelle einer schlagartigen Öffnung des grossen Bildes, dieses z.B. innerhalb einer halben Sekunde sichtbar wird.
Trotzdem vielen Dank für deinen Tipp

[Encoder]

Die halbe Sekunde liegt mit Sicherheit noch im akzeptablen Bereich.
Ich dachte da zum Beispiel an Flashgalerien, bei denen das alte Bild erst mal kleiner wird, dann dreht sich dieser Kreis bis das neue Bild geladen wird und das macht dann nochmal irgendwelche Animationen bis es endlich sichtbar wird.

[bleicher]

Grüße,
wie wäre es mit transition-duration ?
afaik können fast alle aktuelle broswerversionen es schon (ggf mit Vorsilbe, aber immerhin)
MFG
bleicher

[Gunds]

Klingt toll, doch was soll ich mit dieser Information anfangen?

[Don P]

Hallo,

wie wäre es mit transition-duration ?
afaik können fast alle aktuelle broswerversionen es schon (ggf mit Vorsilbe, aber immerhin)

Klingt toll, doch was soll ich mit dieser Information anfangen?

Ein bisschen drüber nachdenken vielleicht:
Wonach sieht es denn aus? CSS kennst du?
"transition-duration" klingt irgendwie nach CSS. Und aktuelle Browserversionen brauchen dabei ggf. eine Vorsilbe, also brauchst du eine "cross-browser"-Lösung (so heißt das meistens im Fachjargon) und eine Suchmaschine.

Gruß, Don P

[Gunds]

Sorry, hab mich bei dir gar nicht bedankt!
Herzlichen Dank!