Überblendung mit JavaScript (Evtl. mini JOB zu vergeben)

[Gast123]

Hi,

1. Du legst die Bilder in der Seite ab, jeweils absolut positioniert, und nur eins sichtbar, etwa so:

<div style="position:relative">  
<img src="bild1.jpg" style="position:absolute;display:inline" />  
<img src="bild1.jpg" style="position:absolute;display:none" />  
<img src="bild1.jpg" style="position:absolute;display:none" />  
<img src="bild1.jpg" style="position:absolute;display:none" />  
</div>

Evtl. auch noch top/left setzen.

2. Du bindest ein Click Event an jeden Link und übergibst dem EventHandler eine Referenz auf das Bild in das du überblenden willst (etwa über eine ID oder den Index im Container). (oder verbindest auf andere Weise den Link mit dem entsprechenden Bild)

3. Im EventHandler
a) setzt du das entsprechende Bild auf display:inline,
b) findest das aktuell angezeigte Bild,
c) startest einen Timer, der der die Transparenz des neuen Bildes von 0 auf 1 animiert und die des alten von 1 auf 0.
d) wenn er fertig mit der Animation ist, wechselst du die Seite.

Du kannst natürlich auch statt display:none die Bilder auf Transparenz 0 setzen.

Gruß!