Seite 1 von 3
#1 5 verschiedene Hintergrundwechsler für Forum und Homepage - Teil 1 von Wolfgang 09.08.2007 22:48

avatar

5 x Hintergrundwechsler für Forum und Homepage - Teil 1
Aktualisiert 20.11.19



Wie soll der Hintergrundwechsler funktionieren?

  • Soll sich das Hintergrundbild beim erneuten Webseitenaufruf ändern? - Teil 2
  • Oder automatisch nach einer bestimmten Zeit? - Teil 3
  • Oder automatisch zu einer bestimmten Tagezeit? - Teil 4
  • Soll der User das Hintergrundbild selber auswählen? - Teil 5
  • ...


Die Wahl des Hintergrundwechslers ist bestimmt Geschmacksache und kann von Forum zu Forum oder Homepage zu Homepage, unterschiedlich passen und nützlich sein.


Die folgenden Einbauanleitungen funktionieren ohne Eingriff ins Template!


Wichtige Links aus dem Forum:
Styleswitcher - Designauswahl für's gesamte Forum
"Background" per "mouseover" verändern!
Hintergrundwechsler für verschiedene Tageszeiten





Wolfgang

#2 Hintergrundbilder wechseln bei erneuten Webseitenaufruf - Teil 2 von Wolfgang 09.08.2007 23:30

avatar

Hintergrundbilder wechseln bei erneuten Webseitenaufruf - Teil 2
Aktualisiert 07.05.21



Hintergrundbilder wechseln bei erneuten Webseitenaufruf
Hier kommt ein Hintergrundwechsler, der bei jedem erneuten Webseitenaufruf den Hintergrund per Zufall auswählt.
Der Hintergrundwechsler funktioniert in allen gängigen Browsern und ohne Komplikationen!!!


Einbauanleitung ohne Eingriff ins Template!


Damit das Script läuft, darf im "Body-Tag" (<body ...) keine Hintergrundfarbe und kein festes Hintergrundbild eingetragen sein.
Bitte überprüfen!


  • Nur im Standard-Template ist kein festes Hintergrundbild und keine Hintergrundfarbe eingetragen!
  • Im Business-Template die "Hintergrundfarbe Content" und "Hintergrundfarbe des Fensters" löschen (x).
  • Wenn vorhanden, im Business-Template das "Hintergrundbild" löschen (x).
  • Wenn vorhanden, in Eigener CSS Code Hintergrundbild löschen.
  • Wenn vorhanden, in Eigener CSS Code Hinterfarbe löschen.

1
2
3
4
5
6
7
8
9
 
Hintergrundfarbe löschen oder umbenennen:
body {background: #......;}
oder umbenennen in z.B.:
body {background-color: #E9E9E9;}
 
Hintergrundbild löschen:
body {background: url(https://.................... );}
oder
body {background-image: url(https://.................... );}
 




  • Das Skript kann in die "Kopf- oder Fußzeile" oder besser als PIugin in "Untere Leiste - header" kopiert werden!
  • Die Hintergrundbilder können beliebig unter "backImage" erweitert werden

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<script>
function zufall(){
var backImage = [
"https://files.homepagemodules.de/b104774/f46t1197p2704n55_crUpGYli.jpg",
"https://files.homepagemodules.de/b104774/f46t1197p2704n56_IJocTREC.jpg",
"https://files.homepagemodules.de/b104774/f46t1197p2704n57_queRaPpN.jpg",
];

var zeilenanzahl = backImage.length - 1;
var zeile = Math.round(Math.random()/(1/zeilenanzahl));
document.getElementsByTagName("body")[0].background=backImage[zeile];
}

window.onload = zufall();
</script>
 






Der Hintergrundwechsler in Aktion: Hintergrundbilder wechseln bei erneuten Webseitenaufruf!





Wolfgang

#3 Hintergrundbilder wechseln automatisch nach Zeit - Teil 3 von Wolfgang 10.08.2007 00:15

avatar

Hintergrundbilder wechseln automatisch nach Zeit - Teil 3
Aktualisiert 07.05.21



Hintergrundbilder wechseln automatisch nach einer vorgegebenen Zeit. Will man den Hintergrund (Hintergrundbild) im schnellen Wechsel ändern, muss man aufpassen, dass dieser Effekt auf die Dauer nicht zu nervig wird.
Die Hintergrundbilder müssen daher gut auf das Forum abgestimmt sein!
Der Hintergrundwechsler funktioniert in allen gängigen Browsern und ohne Komplikationen!!!


Einbauanleitung ohne Eingriff ins Template!


Damit das Script läuft, darf im "Body-Tag" (<body ...) kein festes Hintergrundbild eingetragen sein.
Bitte überprüfen!


  • Nur im Standard-Template ist kein festes Hintergrundbild und keine Hintergrundfarbe eingetragen!
  • Im Business-Template die "Hintergrundfarbe Content" und "Hintergrundfarbe des Fensters" löschen (x).
  • Wenn vorhanden, im Business-Template das "Hintergrundbild" löschen (x).
  • Wenn vorhanden, in Eigener CSS Code Hintergrundbild löschen.
  • Wenn vorhanden, in Eigener CSS Code Hinterfarbe löschen.

1
2
3
4
5
6
7
8
9
 
Hintergrundfarbe löschen oder umbenennen:
body {background: #......;}
oder umbenennen in z.B.:
body {background-color: #E9E9E9;}
 
Hintergrundbild löschen:
body {background: url(https://.................... );}
oder
body {background-image: url(https://.................... );}
 





  • Das Skript kann in die "Kopf- oder Fußzeile" oder besser als PIugin in "Untere Leiste - header" kopiert werden!
  • Die Hintergrundbilder werden in Zeile 4-7 eingetragen.
  • Die Geschwindigkeit der Hintergrundwechsel bestimmt die Eintragung in Zeile 2, hier 5 Sekunden (5000 mS).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<script>
var timeChange = 5000;
var bildChange = [
'https://files.homepagemodules.de/b104774/f46t1197p2704n55_crUpGYli.jpg',
'https://files.homepagemodules.de/b104774/f46t1197p2704n56_IJocTREC.jpg',
'https://files.homepagemodules.de/b104774/f46t1197p2704n52_tKbFyagH.jpg',
'https://files.homepagemodules.de/b104774/pictures_u554_tFrmxKbz.jpg'
];
 
var zeileChange = "0";
function bildwechseln() {
document.getElementsByTagName("body")[0].background=bildChange[zeileChange];
zeileChange++;
if (zeileChange == bildChange.length) {
zeileChange = 0;
}

setTimeout("bildwechseln()",timeChange);
}

window.onload = bildwechseln;
</script>
 







Der Hintergrundwechsler in Aktion: Hintergrundbilder wechseln automatisch nach Zeit!




Bis dann

Wolfgang

#4 Hintergrundbilder automatisch nach Tageszeit einstellen - Teil 4 von Wolfgang 10.08.2007 00:18

avatar

Hintergrundbilder automatisch nach Tageszeit einstellen - Teil 4
Aktualisiert 17.05.17



Hier kommt ein Hintergrundwechsler, bei dem der Hintergrund sich nach der Tageszeit automatisch einstellt.
Der Hintergrundwechsler funktioniert in allen gängigen Browsern und ohne Komplikationen!!!
Es sind Zeitwechsel für 0 Uhr, 8 Uhr, 12Uhr, 16 Uhr und 20 Uhr eingebaut.



Einbauanleitung ohne Eingriff ins Template!


Damit das Skript läuft, darf im "Body-Tag" (<body ...) kein festes Hintergrundbild eingetragen sein.
Bitte überprüfen!


  • Nur im Standard-Template ist kein festes Hintergrundbild und keine Hintergrundfarbe eingetragen!
  • Im Business-Template die "Hintergrundfarbe Content" und "Hintergrundfarbe des Fensters" löschen (x).
  • Wenn vorhanden, im Business-Template das "Hintergrundbild" löschen (x).
  • Wenn vorhanden, in Eigener CSS Code Hintergrundbild löschen.
  • Wenn vorhanden, in Eigener CSS Code Hinterfarbe löschen.

1
2
3
4
5
6
7
8
9
 
Hintergrundfarbe löschen oder umbenennen:
body {background: #......;}
oder umbenennen in z.B.:
body {background-color: #E9E9E9;}
 
Hintergrundbild löschen:
body {background: url(https://.................... );}
oder
body {background-image: url(https://.................... );}
 





  • Das Skript kann in die "Kopf- oder Fußzeile" oder besser als PIugin in "Untere Leiste - header" kopiert werden!
  • Die Bilder werden entsprechend den Tageszeiten in "Zeile 6-10" eingetragen!
  • Zum Testen der Bilder kann in "Zeile 15" für den Wert "null" die entsprechende Tageszeit in voller Stunde eingegeben werden

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<script language="javascript" type="text/javascript">
function switch_time_background() {
 
// Hintergrundbilder für Uhrzeiten definieren:
var time_bg = new Array(
{ time: 0, url: 'https://addpics.com/files/6v-4k-fdd7.jpg' },
{ time: 8, url: 'https://addpics.com/files/6v-4j-a755.jpg' },
{ time: 12, url: 'https://addpics.com/files/6v-4k-fdd7.jpg' },
{ time: 16, url: 'https://addpics.com/files/6v-4i-7193.jpg' },
{ time: 20, url: 'https://addpics.com/files/6v-4j-a755.jpg' });
 
// Testzeit - überschreibt tatsächliche Uhrzeit
// Für Wert "null" volle Stunde eintragen (z.B.: 12)
// Wert "null" Grundstellung!
var test_time = null;
 
var body_bg = '';
var time = new Date();
var hour = time.getHours();
if (test_time != null)
hour = test_time;

for (var i=(time_bg.length-1); i>=0; i--) {
if (hour >= time_bg[i].time) {
body_bg = time_bg[i].url;
break;
}}

if (body_bg != '')
document.getElementsByTagName('body')[0].style.backgroundImage = 'url('+body_bg+')';
}
 
window.onload = switch_time_background;
</script>
 
 







Der Hintergrundwechsler in Aktion: Hintergrundbilder automatisch nach Tageszeit einstellen


PS: Nochmal besten Dank an Florian und Sachse für Ideen und Umsetzung




Bis dann

Wolfgang

#5 Hintergrundwechsler mit Vorschau, manuell einstellbar! - Teil 5 von Wolfgang 17.09.2015 00:28

avatar

Hintergrundwechsler mit Vorschau, manuell einstellbar! - Teil 5
Aktualisiert 24.11.19



  • Hier kommt ein Hintergrundwechsler, bei dem der Hintergrund manuell mit Vorschau vom User eingestellt werden kann.
  • Damit man das Hintergrundbild in der Vorschau besser erkennen kann, werden noch zusätzlich die Boxen und Leisten ausgeblendet.
  • Es besteht auch die Möglichkeit, anstatt Hintergrundbilder, Farben oder Farbverläufe zu wechseln (schnellere Ladezeiten)!
  • Das Hintergrundbild hält sich auch, wenn die Seiten gewechselt oder geschlossen werden.
  • Der Hintergrundwechsler funktioniert in allen gängigen Browsern und ohne Komplikationen!!!



Einbauanleitung ohne Eingriff ins Template!


Damit das Script ordnungsmäßig läuft, sollten im "Body-Tag" (<body ...) alte Hintergrundfarben und alte Hintergrundbilder deaktiviert werden!
Um ein Fehlverhalten nach Änderung des Scriptes zu vermeiden "Cache (F5)" oder auch wenn nötig "Browserverlauf" löschen.
Bitte überprüfen!


  • Nur im Standard-Template ist kein festes Hintergrundbild und keine Hintergrundfarbe eingetragen!
  • Im Business-Template die "Hintergrundfarbe Content" und "Hintergrundfarbe des Fensters" löschen (x).
  • Wenn vorhanden, im Business-Template das "Hintergrundbild" löschen (x).
  • Wenn vorhanden, in Eigener CSS Code Hintergrundbild löschen.
  • Wenn vorhanden, in Eigener CSS Code Hinterfarbe löschen.

1
2
3
4
5
6
7
8
9
 
Hintergrundfarbe löschen oder umbenennen:
body {background: #......;}
oder umbenennen in z.B.:
body {background-color: #E9E9E9;}
 
Hintergrundbild löschen:
body {background: url(https://.................... );}
oder
body {background-image: url(https://.................... );}
 





  • Die Werte für die CSS werden unter "Admin > Layout > Farben & Einstellungen > CSS" in "Eigener CSS Code" eingetragen!
  • Die Hintergrundfarbe im "Body" und "Start-Button 1" sollten gleich sein ("Zeile 7 und 27". Hier "background-color: #223376;")
  • Sollen nur Bilder gewechselt werden, den Wert für die Hintergrundfarbe in "Zeile 27" und die Auskommentierung in "Zeile 26" löschen
  • Über "class=bgtopnavi" kann die Position der Auslösebutton bestimmt werden!
  • Über ".bgimagepalette" kann die Größe und das Aussehen der Auslöse-Button bestimmt werden!
  • Für eine Erweiterung der Hintergrundbilder wird jeweils ein Eintrag von ".bgimagesswitch" in der CSS (unter Zeile 41-43) und ein weiterer Div-Container (unter Zeile 46) im JavaScript benötigt.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
<style type="text/css">

body {
background-size:100% 100%;
-moz-background-size:100% 100%;
background-attachment:fixed;
background-color:#223376;
}
.bgtopnavi {
position: absolute !important;
float: left !impotant;
z-index: 9000 !important;
top:0px;
}
.bgimagepalette {
display:inline-block;
z-index:9000;
margin: 5px !important;
height: 15px !important;
width: 20px !important;
border: 1px solid #eeeeee !important;
cursor:pointer !important;
}
 
.bgimagesswitch1 {
/* background:url(//files.homepagemodules.de/b104774/f46t1197p2704n55_crUpGYli.jpg); */
background: #223376;
}
.bgimagesswitch2 {
background:url(//files.homepagemodules.de/b104774/f46t1197p2704n56_IJocTREC.jpg);
}
.bgimagesswitch3 {
background:url(//files.homepagemodules.de/b104774/f46t1197p2704n57_queRaPpN.jpg);
}
.bgimagesswitch4 {
background:url(//files.homepagemodules.de/b104774/f46t1197p2704n53_KjxQsSrm.jpg);
}
.bgimagesswitch5 {
background:url(//files.homepagemodules.de/b104774/f46t1197p2704n52_tKbFyagH.jpg);
}
.bgimagesswitch6 {
background:url(//files.homepagemodules.de/b104774/pictures_u554_tFrmxKbz.jpg);
}
 
</style>
 





  • Das Skript kann in die "Kopf- oder Fußzeile" oder besser als PIugin in "Untere Leiste - header" kopiert werden!
  • Die "Klassen" und "ID's" in "Zeile 18,19 und 26" sind für das Aus- und Einblenden der Foren-Boxen beim "Mouseover" notwendig.
    Sie sind hier für das Business-Template angepasst. Für andere Templates gelten andere "Klassen" und "ID's".
  • Für eine Erweiterung der Hintergrundbilder wird jeweils ein Eintrag von ".bgimagesswitch" in der CSS (unter Zeile 41-43) und ein weiterer Div-Container (unter Zeile 46) hier im Skript benötigt.
  • Will man auf das Aus- und Einblenden der Boxen-Fenster verzichten, "Zeile 18,19 und 26" einfach auskommentieren oder löschen.
  • Will man auf die Vorschau verzichten, "Zeile 12 bis 27" auskommentieren oder löschen.
  • Nur wenn JQuery nicht vorhanden ist (z.B. im Standard-Template), die Zeichen fürs "Auskommentieren" in "Zeile 3" löschen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 

<!--Nur wenn JQuery nicht vorhanden ist (Standard-Template), die Zeichen fürs "Auskommentieren" in der nächsten Zeile löschen-->
<!--<script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script>-->
 
<script type="text/javascript">
$('div.topnavigation_wrap').prepend($('div.bgtopnavi'));
 
var getColour = localStorage.background;
$("body").addClass(getColour);
 
$(document).ready(function () {
 
//Vorschau
$('.bgimagepalette').hover(function() {
 
$("body").removeClass(getColour);
var getColour = $(this).attr("id");
$("body").addClass(getColour);
$('.flagcounter,#google_translate_element,.header,.container,.background_hidden,.footer,.imageslider,.transl').attr('style','visibility:hidden !important;');
$('#fb_like,#blog-sidebar').attr('style','display:none !important;');
 
}, function() {
 
$("body").removeClass(getColour);
var getColour = localStorage.background;
$("body").addClass(getColour);
$('#blog-sidebar,#fb_like,.flagcounter,#google_translate_element,.header,.container,.background_hidden,.footer,.imageslider,.transl').attr('style','visibility:visible !important;');
});
 
//Hintergrundbild festlegen
$('.bgimagepalette').click(function () {
//$("body").removeClass(getColour);
//localStorage.removeItem('background');
var getColour = $(this).attr("id");
localStorage.setItem("background", getColour);
});
});
 
</script>
 
<!-- Leiste der Auslöse-Button -->
<div class="bgtopnavi" title="Hintergrundbild durch einen Mausklick ändern!">

<div id="bgimagesswitch1" class="bgimagepalette bgimagesswitch1"></div>
<div id="bgimagesswitch2" class="bgimagepalette bgimagesswitch2"></div>
<div id="bgimagesswitch3" class="bgimagepalette bgimagesswitch3"></div>
<div id="bgimagesswitch4" class="bgimagepalette bgimagesswitch4"></div>
<div id="bgimagesswitch5" class="bgimagepalette bgimagesswitch5"></div>
<div id="bgimagesswitch6" class="bgimagepalette bgimagesswitch6"></div>

</div>
 





Hintergrundwechsler nur mit Farben oder Farbverläufen:
  • Es ist auch möglich, nur Farben oder Farbverläufe zu wechseln!
  • Hierzu werden in Zeile 10-20 die Tags (background...) gegen Farben oder Farbverläufe ausgetauscht.



Der Hintergrundwechsler in Aktion:



PS: Nochmal besten Dank an Jürgen





Bis dann

Wolfgang

Xobor Forum Software von Xobor