Auto Change Background Image in PHP

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

Up Next
    Ebook Download
    View all
    Learn
    View all