Bilder wechseln ? [Planung]

[TAKE OFF]

Hallo Allerseits,

ich entwickle gerade eine Bildergalerie, und bin jetzt an einen Punkt wo mir einfach die Ideen ausgehen ;)
Den Teil mit dem sanften wechseln eines Bildes habe ich schon geschafft :roll:

Exklusiv entwickelt von Mir xD

(Mit einem klick auf das Bild, wechselt dieses sich langsam)

Testen könnt ihr das in: IE - FF - Opera


Mein Problem:

Aktuell habe ich im <td> TAG ein Vordergrundbild und im background ein Hintergrundbild,
das Vordergrund Bild wird beim starten der Funktion in der Transparenz reduziert,
und das Hintergrund Bild wird so nach und nach sichtbar.
In meiner Demo klappt das ganz gut, aber was wenn das Hintergrund Bild größer als das Vordergrund Bild ist ?
Der Hintergrund wird immer nur so groß sein wie sein Vordergrund.

Meine Idee mit Div Container und Z-Index Arbeiten ;)

Aber auch da sind noch fragen offen die ich anhand von einer Grafik darstellen möchte:

Punkt1:
Das Vordergrundbild braucht einen Bezugspunkt zum Hintergrundbild ;)
(Z-Index nicht vergessen)

Punkt2:

Gehen wir davon aus ich hätte den Bezugspunkt,
so könnte ich abfragen wie groß das Hintergrundbild ist, und dem Vordergrund Div Container auf diese Größe bringen,
und dann die fehlenden Pixel mit Weiß fühlen,
somit würde man das Hintergrundbild niemals sehen ;)
(Nur meine Theorie bitte auch das berücksichtigen)

Ich hoffe Ihr könnt mir mal ein bisschen unter die Arme greifen :roll:

gruß.Take

 

[omoxen]

was meinst du mit Bezugspunkt zum Hintergrundbild?
Dass das Vordergrundbild in der Mitte des Hintergrundbildes steht?

 

[Gilles]

was meinst du mit Bezugspunkt zum Hintergrundbild?
Dass das Vordergrundbild in der Mitte des Hintergrundbildes steht?

Ich denke er meint einfach die 2 Punkte, die das hintere Bild hat. Damit das vordere Bild-Element (wahrscheinlich ein Div oder ähnliches) am Hinteren Bildpunkt 1 anfängt und die Breite dann ausgelesen werden und gesetzt werden kann.

Nun zu deinem Vorhaben :)
Du hast einen Bildcontainer. Dieser muss auf Grund der "Slideshow" schonmal eine fest Höhe und Breite haben.
Da dies nur ein Style-Element ist, sollte man hier einen Div-Container nehmen.
Nun wird dein erstes Bild in den Bild-Layer1 eingefügt und zwar sollte das folgendermaßen passieren:

- Fülle den Bild Layer mit einer Hintergrundfarbe (z.B. Schwarz)
- Setze für Bild-Layer1: text-align: center in css
- innerhalb des Bild-Layer1 befindet sich dann Bild1
- Bild1 hat ein margin: auto, sodass das Bild1 nun mittig für IE und Firefox ist.
- Das selbe machst du für Bild-Layer2 und Bild2
- Für Bild-Layer2 musst du dir nur die Position von Bild-Layer1 holen, den Bild-Layer2 auf position: absolute stellen und dann die Position, Breite und Höhe des Bild-Layer1 nehmen.
- Der Rest sollte dir bekannt sein :)

Für die Positionsgeschichte geb ich dir mal folgende Funktion mit auf den Weg:

/**
   * Ermittelt die Position eines Elementes
   */
  this.getTopLeft = function(elm) {
    var x, y = 0;
    //set x to elm’s offsetLeft
    x = elm.offsetLeft;
    //set y to elm’s offsetTop
    y = elm.offsetTop;
    //set elm to its offsetParent
    elm = elm.offsetParent;
  
    //use while loop to check if elm is null
    // if not then add current elm’s offsetLeft to x
    //offsetTop to y and set elm to its offsetParent
  
    while(elm !== null) {
     x = parseInt(x) + parseInt(elm.offsetLeft);
     y = parseInt(y) + parseInt(elm.offsetTop);
     elm = elm.offsetParent;
    }
    return {Top:y, Left: x};
  };