What ?
Here I will explain How to change the background image of the page dynamically by using CSS and JavaScript
Explanation :
Below example i have taken 3 sample images for background slide, change that image paths according to your system paths.
imgs[0]="images/Sunset.jpg"; imgs[1]="images/Bluehills.jpg"; imgs[2]="images/Sunset.jpg";
Save the below code as "Slide.html" and test it.......
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us">
<style>
body{
background-repeat: no-repeat;
background-position: 50 50;
}
</style>
<script >
//Specify background images to slide
var imgs=new Array()
imgs[0]="images/Sunset.jpg";
imgs[1]="images/Bluehills.jpg";
imgs[2]="images/Sunset.jpg";
//Specify interval between slide (in miliseconds)
var speed=2000
//preload images
var processed=new Array()
for (i=0;i<imgs.length;i++){
processed[i]=new Image();
processed[i].src=imgs[i];
}
var inc=-1;
function slideimg(){
if (inc<imgs.length-1)
inc++;
else
inc=0;
document.body.background=processed[inc].src;
}
if (document.all||document.getElementById)
window.onload=new Function('setInterval("slideimg()",speed)');
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="table1" height="381">
<tr>
<td>
<p>This is Sample text</p>
<p>This Sample text</p>
</td>
</tr>
</table>
</body>
</html>
0 comments:
Post a Comment