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

Wechselnder Hintergrund - Website X5 Hilfe - Die Helpsite

Direkt zum Seiteninhalt

Hauptmenü:

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.
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 vordefiniert wird, z. B. "height:400px;".Empfehlen würde ich keine Begrenzung zu wählen und den Hintergrund wie hier in der Demo nach unten auslaufen zu lassen.

Code für den HEAD-Bereich:

[Vor dem /HEAD|Bereich CSS]

<style type="text/css">
.image_slide 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;
}
.image_slide img.fade-out
{opacity:0;}
.image_slide img.fade-in
{opacity:1;}
</style>

<script type="text/javascript">
var interval = 4 * 10;
// Sekunden zwischen dem Bildwechsel
var images = document.getElementsByName("sl_image");
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();
</script>

Code vor dem HTML-Bereich:

[Bereich vor HTML]

<div class="image_slide">
<img name="sl_image" src="images/bg_yellow.png" alt="Background gelb">
<img name="sl_image" src="images/bg_blue.png" alt="Background blau">
<img name="sl_image" src="images/bg_green.png" alt="Background grün">
</div>

Der Code wird ab der Version 11 "Nach dem <HEAD> Tag" eingefügt:

[Nach dem  HEAD]

Feedbacks zu ""

es gibt insgesamt 0 Kommentar(e)



Name*
Vorname
Kommentar*
Email *
Homepage
Telefon
Sicherheitscode *
 
Logo HTML5
Button Spenden

© 2009 - 2017




  Besucher Statistik
 » 17 Online
 » 79 Heute
 » 304 Woche
 » 2462 Monat
 » 66452 Jahr
 » 242752 Gesamt
Rekord: 1420 (10.04.2014)
Zurück zum Seiteninhalt | Zurück zum Hauptmenü