Hallo
Habe gestern mit Dreamweaver erfolgreich ein javascript in meine HP eingebunden. Zweck ist, dass mehrere Bilder auf der startseite abwechselnd ein- und ausgeblendet werden. Das geht auch. Jetzt die Frage, ich möchte, dass die Bilder mittig auf der Seite angezeigt werden. Habe nun schon alles mögliche probiert, z.B. das script in eine Tabelle einbinden und dann mit align=center… sicher sehr laienhaft und geht auch nicht
Vielleicht kann mir jemand helfen? Vielen, vielen Dank!!!
Anbei das script, wie es jetzt aussieht:
function imageLine()
{
var checkInterval = null,
imageLineInterval = null,
currentImage = -1;
/*
Variablen die man in
verschiedenen Funktionen benötigt
*/
images = new Array(
‚01.jpg‘,
‚02.jpg‘,
‚03.jpg‘,
‚04.jpg‘
// Diese Bilder sind die standard Windows XP Bilder
);
// Alle Bilder die angezeigt werden sollen
loadingImages = new Array();
// Dieses Array enthält später alle Objekte
this.run = function()
{
checkInterval = window.setInterval(‚this.checkIfLoaded();‘, 100);
// Alle 100 Millisekunden prüfen ob alle Bilder geladen sind
for(i = 0;i < images.length;i++)
{
image = images[i];
loadingImages.push(new Image);
loadingImages[i].src = image;
}
/*
Alle Images in dem Array einzeln Durchgehen.
Das Array für die Objekte mit den Objekten füllen.
Dem neuen Objekt die Url des momentanen Bildes geben.
*/
}
this.checkIfLoaded = function()
{
allLoaded = true;
for(i = 0;i < loadingImages.length;i++)
{
loadingImage = loadingImages[i];
if(!loadingImage.complete)
allLoaded = false;
}
/*
Alle Objekte durchgehen.
Prüfen ob das aktuelle Objekt / Bild geladen ist.
Falls nicht dann die Variable zur Prüfung auf false setzen
*/
if(allLoaded)
{
// Wenn alle Objekte / Bilder geladen sind
// Die Interval für das Prüfen löschen
window.clearInterval(checkInterval);
// Das erste Bild anzeigen
this.startImageLine();
// Die Funktion für das Bilder wechseln alle 10 Sekunden ausführen
window.setInterval(‚this.startImageLine();‘, 5000);
}
}
this.startImageLine = function()
{
this.showImage();
// Bild anzeigen
if(currentImage == (loadingImages.length - 1))
currentImage = 0;
else
currentImage += 1;
/*
Aktuelles Bild um eins hochzählen.
Sollte das momentane Bild genau so groß sein,
wie das Array dann wieder beim ersten anfangen.
*/
element = document.getElementById(‚imageline‘);
// Element für die Bilderanzeige
element.style.height = loadingImages[currentImage].height + ‚px‘;
element.style.width = loadingImages[currentImage].width + ‚px‘;
element.style.display = ‚block‘;
// Dem Element die Breite und Höhe des momentanen Bildes geben
element.style.backgroundImage = ‚url(‘ + loadingImages[currentImage].src + ‚)‘;
// Dem Element das aktuelle Bild als Hintergrundbild setzen
window.setTimeout(‚this.hideImage();‘, 4500);
// Das Bild in 3,5 Sekunden ausblenden
}
this.hideImage = function()
{
element = document.getElementById(‚imageline‘);
for(i = 0;i <= 100;i++)
window.setTimeout(‚element.style.filter = "Alpha(opacity=‘ + (100 - i) + ')"; element.style.MozOpacity = ’ + (1 - i / 100) + '; element.style.opacity = ’ + (1 - i / 100) + ‚;‘, i * 5);
// Von 0 bis 100 (Prozent)
// Das i * 5 dient dazu, dass das Ausblenden nicht zu schnell geht
}
this.showImage = function()
{
element = document.getElementById(‚imageline‘);
for(i = 0;i <= 100;i++)
window.setTimeout(‚element.style.filter = "Alpha(opacity=‘ + i + ')"; element.style.MozOpacity = ’ + i / 100 + '; element.style.opacity = ’ + i / 100 + ‚;‘, i * 5);
// Hier das selbe wie bei hideImage
}
this.run();
}
window.onload = function()
{
imageLine();
}