onClick Effekt

[Tim]

Servus,

hab ein Titelbild und ein paar kleine Bilder. Durch ein klick auf das kleine Bild wird es in groß angezeigt, dieses mache ich über onClick leider wird das Bild einfach gewechselt. Gibt es eine Möglichkeit dass der Übergang etwas sanfter ist, wie man es z.B. aus jQuery kennt? Alternativ wie würde diese Funktion mit jQuery funktionieren?

// Mein großes Bild

  
<img src="gross/1.jpg" name="bild">  

// Meine kleine Bilder

  
<img src="klein/1.jpg" onClick="document.bild.src='gross/1.jpg" style="cursor:pointer;">  
  
<img src="klein/2.jpg" onClick="document.bild.src='gross/2.jpg" style="cursor:pointer;">  
  
<img src="klein/3.jpg" onClick="document.bild.src='gross/3.jpg" style="cursor:pointer;">  

[T-Rex]

Bonjour,

dass Grundproblem ist, dass du nicht einfach die src zweier img tauschen kannst, wenn du einen "weichen" Übergang haben willst. Dafür musst du überblenden. Und das geht nur, wenn das eine Bild langsam verschwindet und das andere langsam erscheint.
Demnach gibt es keine kleinen Bilder. Es gibt nur große. Per css sind sie so dargestellt, dass die Bilder übereinander liegen (z.B. mittels position: absolute). Das erste Bild ist sichtbar, der Rest hat display: none und opacity: 0. Durch eine Action die passiert (z.B. ein Klick), wird die Logik in Gang gesetzt das sichtbare Bild langsam verschwinden (opacity wird runtergezählt) zu lassen und das gewünschte Bild langsam erscheinen (opacity wird raufgezählt) zu lassen.

Bei jquery wäre das fadein und fadeout.

Gruß
Fader
T-Rex

[Matthias Apsel]

Om nah hoo pez nyeetz, T-Rex!

Ergänzung: Wie es geht, hat Felix mal ausführlich beschrieben. Allerdings ohne die Größenänderung.
http://wiki.selfhtml.org/wiki/JavaScript/Fader-Framework

Matthias