Background gelb Background blau Background grün
Wechselnder Hintergrund

Wechselnder Hintergrund

Logo Schriftzug
Logo WSX5
Newsletter anmelden
Scan QR or Download Android App
Direkt zum Seiteninhalt

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.
Download Button
Downloads:
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
<div class="Obj165__style">
<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>
Code für den <HEAD> Bereich
<link rel="stylesheet" href="wsX5Obj/Obj165_0/style.css" />
<script src="wsX5Obj/Obj165_0/fade.js"></script>
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; }
Feedbacks zu ""
Kein Kommentar
Vielen Dank für Dein Feedback.
Logo Host Europe
Button Spenden

© 2009 - 2020





Besucher Statistik
» 2 Online
» 35 Heute
» 180 Gestern
» 518 Woche
» 21781 Monat
» 32886 Jahr
» 503554 Gesamt
Record: 1679 (15.02.2020)
Gesamt Downloads:
Hosting by
Zurück zum Seiteninhalt