Background gelb Background blau Background grün
Wechselnder Hintergrund - Website X5 Hilfe - Die Helpsite

Wechselnder Hintergrund - Website X5 Hilfe - Die Helpsite

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

Wechselnder Hintergrund

Tutorials

Bildwechsel des Homepagehintergrundes

Website X5 bietet inzwischen zwar für jede Seite einen inividuellen Hintergrund zu gestalten, 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 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 jeweils 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
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
<div class="Obj165_a">
<img name="Obj165_1" src="wsX5Obj/Obj165_0/img/bg_yellow.png" alt="Background gelb">
<img name="Obj165_1" src="wsX5Obj/Obj165_0/img/bg_blue.png" alt="Background blau">
<img name="Obj165_1" src="wsX5Obj/Obj165_0/img/bg_green.png" alt="Background grün">
</div>
Code für den <HEAD> Bereich
<link rel="stylesheet" type="text/css" href="wsX5Obj/Obj165_0/style.css" />
<script language="javascript" src="wsX5Obj/Obj165_0/fade.js"></script>
Code Datei "fade.js"
var interval = 4 * 10; // Sekunden zwischen dem Bildwechsel
var images = document.getElementsByName("Obj165_1");
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_a 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_a img.fade-out { opacity: 0; }
.Obj165_a img.fade-in { opacity: 1; }
Feedbacks zu ""
Kein Kommentar
Vielen Dank für Dein Feedback.
HTML5
Button Spenden

© 2009 - 2019





Besucher Statistik
» 2 Online
» 139 Heute
» 182 Gestern
» 834 Woche
» 3154 Monat
» 126524 Jahr
» 454280 Gesamt
Record: 2382 (29.03.2019)
Gesamt Downloads:
Zurück zum Seiteninhalt