Wechselnder Hintergrund

Scripte > Attachment

Bildwechsel des Homepagehintergrundes

Website X5 bietet inzwischen zwar für jede Seite einen inividuellen Hintergrund zu gestalten an, doch ist es nicht möglich den Hintergrund wie eine Slide-Show ablaufen zu lassen bzw. den Hintergrund wechseln zu lassen. Aber auch hier gibt es eine Lösung ein, zwei oder mehrere Hintergrundbilder in einer bestimmten Reihenfolge ablaufen zu lassen.

Einfach nur die ZIP-Datei entpacken und das Verzeichnis "wsX5Obj" auf den Webserver ins Root-Verzeichnis kopieren. HEAD-Code in den HEAD-Bereich <head>...</head> und HTML-Code vor dem den HTML-Tag <html> der aufrufende Datei einfügen.

Eine demo.html ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.

Aufruf: "http://www.domain.tld/demo.html". Diese kann aber auch durch einen Doppelklick ausgeführt werden.

x runter geladen

Zu beachten wäre, dass das gewählte Hintergrundbild der Höhe der jeweiligen Seite entspricht bzw. die Seite entsprechend der Höhe des Bildes aufgebaut wird.
Eine Höhenbegrenzung der Bilderhintergründe ist im Stylebereich möglich indem statt "height: auto;" die Höhe auf "height: 400px;" eingestellt wird. Empfehlen würden wir natürlüch keine Begrenzung zu wählen und den Hintergrund bei einfarbigen Bildern wie hier in der Demo nach unten auslaufen zu lassen. Natürlich können auch "richtige Bilder" als Hintergrund gewählt werden, der Code Vor dem <HTML> Tag muss dann entsprechen angepasst werden. Die Bilder dann nur in das Verzeichnis "img" in entsprechender Größe einfügen.

Code vor dem <HTML> Tag

<img name="Obj165" src="wsX5Obj/Obj165_0/img/bg_yellow.png" alt="Background gelb">
<img name="Obj165" src="wsX5Obj/Obj165_0/img/bg_blue.png" alt="Background blau">
<img name="Obj165" src="wsX5Obj/Obj165_0/img/bg_green.png" alt="Background grün">

</div>

Vor dem <HTML> Tag

Code für den <HEAD> Bereich

Vor dem </HEAD> Tag

Code Datei "fade.js"

var interval = 4 * 10; // Sekunden zwischen dem Bildwechsel

var images = document.getElementsByName("Obj165");

var imageArray = [];

var imageCount = images.length;

var current = 0;

var randomize = function(){

return (Math.round(Math.random() * 3 - 1.5));

}

for(var i = 0; i < imageCount; i++){
images[i].className = 'fade-out';
imageArray[i] = images[i];

}

imageArray.sort(randomize);

var fade = function(){

imageArray[current++].className = 'fade-out';
if(current == imageCount){
current = 0;
imageArray.sort(randomize);
}

imageArray[current].className = 'fade-in';
setTimeout(fade, interval * 100);

};

fade();

Code Datei "style.css"

.Obj165_style img {

-webkit-transition-propertypacity;
-webkit-transition-duration: 3s;
-moz-transition-propertypacity;
-moz-transition-duration: 3s;
position: absolute;
width: 100%;
height: auto;
min-width: 400px;
z-index: 0;
}

.Obj165_style img.fade-out { opacity: 0; }

.Obj165_style img.fade-in { opacity: 1; }

» nach oben «