Forum

Salut as dori sa stiu daca se poate crea un background personalizat care sa se schimbe automat in functie de data sau de ora la care se intra pe site de ex: daca este 1 mai ziua sa alara o poza cu marea ziua iar daca inru seara sa apara alta poza cu marea noaptea iar daca este 1 febroarie sa apara poza cu zapada ceva de genu asta.
Multumesc

Salut
Poti folosi acest script. Seteaza imagine de background la pagina (la <body>). Doar modifici adresa imaginilor de la "bg_images".
Daca vrei sa schimbi ceva la el, vezi prin lectiile de pe site, HTML, CSS, JavaScript; poate te ajuta.

Cod: Selectaţi tot

<script>
// Script to display background image according to season of the year and time of the day
// Just change the images address with the path to your images ( https://coursesweb.net/ )
var bg_images = {
  winter: ['image_winter_day.jpg', 'image_winter_night.jpg'],
  spring: ['image_spring_day.jpg', 'image_spring_night.jpg'],
  summer: ['image_summer_day.jpg', 'image_summer_night.jpg'],
  autumn: ['image_autumn_day.jpg', 'image_autumn_night.jpg']
};
var get_now = new Date();
var this_month = get_now.getMonth();
var this_hour = get_now.getHours();

// get season according to month
if(this_month == 11 || this_month == 0 || this_month == 1) var this_season = 'winter';
else if(this_month == 2 || this_month == 3 || this_month == 4) var this_season = 'spring';
else if(this_month == 5 || this_month == 6 || this_month == 7) var this_season = 'summer';
else var this_season = 'autumn';

// get day /night according to hour
if(this_hour > 19 || this_hour < 7) var day_night = 1;
else var day_night = 0;

// set background to <body>
document.querySelector('body').setAttribute('style', 'background:url(\''+ bg_images[this_season][day_night] +'\') no-repeat scroll center center #fbfcfe');
</script>

- Scriptul se adauga dupa <body>.

salut
Am inlocuit in script pozele cu undele din folder Images cam asa

Cod: Selectaţi tot

var bg_images = {
  winter: ['../images/back_1.jpg', '../images/back_5.jpg'],
  spring: ['../images/back_2.jpg', '../images/back_6.jpg'],
  summer: ['../images/back_3.jpg', '../images/back_7.jpg'],
  autumn: ['../images/back_4.jpg', '../images/back_8.jpg']
};

si tot scriptu dupa este copiat imediat dupa <body>
<script>..... ...... ... </script>continut pagina</body>
dar nu imi afiseaza nimic??
in fisieru ce css nu mai modific nimic ??

Salut
Am testat scriptul, si a functionat. In css nu trebuie nimic, scriptul adauga un "style" in <body> cu codul necesar.
Poate adresa fisierului cu imaginea, in raport cu adresa paginii, nu e corecta.
Incearca sa inlocuiesti in codul scriptului: #fbfcfe cu #00f . Ar trebui sa apara un fundal albastru; in cazul acesta trebuie corectata adresa imaginii.

Salut
Am rezolvat acum functioneaza, aveam o poza care nu o putea deschide asta nu stiu de ce da am inlocuito si este ok dar mai am cateva problemute:
1. In IE imi da tot timpu "internet explorer restricted this webpage from running scripts or activex controlsinternet explorer restricted" sti cum pot sa faca sa nu imi mai ceara chestia asta ???
2. Am introdus si zilele din luna cu "var day = get_now.getDate();" si am incect sa afisez fundalul de ex: in ziua de 25 decembeie "if(month == 11, day == 25 ) var this_season = 'craciun';" problema este ca nu imi afiseaza doar in decembrie imi afiseaza in fiecare luna in data de 25 si nu inteleg de ce ca este selectata luna ??
3. Si daca pe acest script se paote seta sa afiseze imaginea in fundal in functie de pagina pe care te afli???
Multumesc pentru ajutor

1. Acel mesaj in Internet Explorer are legatura cu configuratia browser-ului, dar nu cunosc cum se poate anula.
2. Incearca " if(month == 11 && day == 25) ".
3. Pentru a modifica background-ul in functie de pagina, trebuie adaugate noi instructiuni cu verificare adresa pagina.
Se preia adresa cu:

Cod: Selectaţi tot

var adresa = window.location;

si un obiect cu paginile care vrei si imaginile asociate lor. Se poate daca stii JavaScript.

- La alte modificari in script nu ma implic.

Forum

background diferit in functie de timpul zilei si anotimp

background diferit in functie de timpul zilei si anotimp