Introduction
In this article I explain how to automatically change the background image in PHP. I will use some images for automatically changing the background. This is very simple and very useful for a website and using this article you can give your website an impressive background. I have provided two examples of changing the background image.
Example
<html>
<head>
<title>Auto change background image</title>
<script language="JavaScript">
var image1 = "A.jpg";
var image2 = "B.jpg";
var image3 = "C.jpg";
var imgNumber=1;
var totleimage=5;
var time=3;
function Switchimg(counter)
{
if(counter < time)
{
counter++;
document.roll.src = eval("image" + imgNumber);
CallSwitchimg=window.setTimeout("Switchimg("+counter+")",1500);
}
else
{
if(imgNumber < totleimage)
{
imgNumber++;
Switchimg(0);
}
else
{
imgNumber=1;
Switchimg(0);
}
}
}
</script>
</head>
<body onLoad="Switchimg(0)">
<img src="A.jpg" height="350" width="450" border="0" name="roll">
</body>
</html>
Output
Here, the image changes every five minutes.
![auto change.jpg]()
Here, I have initialized a JavaScript array and stored the image.
Example
<html>
<head>
<title>Auto change background image</title>
<script language="JavaScript">
var array=['A.jpg','B.jpg','C.jpg'];
for (var img,pic=0;pic<array.length;pic++)
{
img=array[pic];
array[pic]=new Image();
array[pic].src=img;
}
var bac=0,to=null;
function ImageRotate()
{
bac=++bac%array.length;
document.getElementById('name').style.backgroundImage='url('+array[bac].src+')';
to=setTimeout(function()
{ ImageRotate(); },1500);
}
</script>
</head>
<body onLoad="ImageRotate();">
<table id="name" width="528" border="0" cellspacing="0" align="center" background="A.jpg" height="400">
<tr>
<td>Auto change image</td>
</tr>
</table>
</body>
</html>
Output
Here, change your image every second.
![auto change2.jpg]()