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

Wechselnder Hintergrund - Website X5 Helpsite

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 ""

Keine Kommentare gefunden.

Bitte Dein Feedback

Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.

Login | Registrierung


            CAPTCHA
            Vielen Dank für Dein Feedback.
            Logo Host Europe
            Button Spenden

            © 2009 - 2020




            
            Besucher Statistik
            » 1 Online
            » 66 Heute
            » 1 Gestern
            » 304 Woche
            » 304 Monat
            » 38829 Jahr
            » 263035 Gesamt
            Record: 1144 (01.02.2020)
            Gesamt Downloads:
            Hosting by
            Zurück zum Seiteninhalt