Değişen Arkaplan Resmi

Günün belli saatlerine göre değişen arkaplan uygulaması yapacağımız bu anlatımda hem php hemde javascript ile nasıl yapılır, bunun kodlarını paylaşacağım. Ziyaretçilerinize sitenizde arkaplan resmi olarak, sabah doğan bir güneş, öğlen daha bir cıvıl cıvıl resim, akşam ise batan güneş ve onikiden sonra bir gece resmi göstermek mümkün.

Aşağıda verilen iki yöntemden birini uygulayabilirsiniz. Hangisi kolayınıza geliyorsa…

Php ile günün belli saatlerine göre değişen arkaplan uygulaması

<?php 
if("06:00"< date("H:i") && date("H:i")<"12:00"){ 
    echo "<body style='background:url('resim_adresi');'>"; // SABAH 
}elseif("12:00"<date("H:i")&& date("H:i")<"18:00"){ 
    echo "<body style='background:url('resim_adresi');'>"; // ÖĞLEDEN SONRA İKİNDİ 
}elseif("18:00"<date("H:i")&& date("H:i")<"24:00"){ 
    echo "<body style='background:url('resim_adresi');'>"; // AKŞAM 
}else{ 
    echo "<body style='background:url('resim_adresi');'>"; // GECE 
}  
?>

Javascript ile günün belli saatlerine göre değişen arkaplan uygulaması

<script type="text/javascript">
var img = '';
var dat = new Date().getHours();
		  if(dat >= 00 && dat < 6)
		  { 
			  img = 'url(body2.jpg)';
			  document.getElementById('background').style.backgroundImage = img;
		  }
		  else if(dat >= 6 && dat < 10)
		  {
			  img = 'url(body3.jpg)';
			  document.getElementById('background').style.backgroundImage = img;
		  }
</script>

İndex dosyanızda direk kullanabilmenizle beraber varsa js klasörünüze dosyayı gönderip isimlendirerek dosyayı çekebilirsiniz de orası size kalmış.

Ardından stil dosyanıza veya şu şekilde direk index dosyanıza style kodlarını ekleyin.

<style type="text/css">
	div#background 
	{
		width:100%; height:100%; position:fixed; top:0px; left:0px; z-index:-999;
		background:url("body.jpg") no-repeat;
	}
</style>

Ardından div’i body etiketlerinin içinde bir kere yazmak yeterli

<div id="background"></div>