HI everybody
i need to know if there are a way to change the background image after a specific time like 10 sec or 30 sec...etc. you know like yahoo Login mail "it's changing the background daily!!"
if there is a way using JQuery or CSS or html or any other thing ,please tell me
you can make it with javascript function
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds){
//change the image
if(!imageID){
document.getElementById("myimage").src="http://www.all-freeware.com/images/full/38943-nice_feathers_free_screensaver_desktop_screen_savers__nature.jpeg";
imageID++;
}
else{if(imageID==1){
document.getElementById("myimage").src="http://www.hickerphoto.com/data/media/186/flower-bouquet-nice_12128.jpg";
imageID++;
}else{if(imageID==2){
document.getElementById("myimage").src="http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg";
imageID=0;
}}}
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
</script>
</head>
<body style='background:black;' onload='changeimage(2)'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'><img width='300px' height='250px' id='myimage' src='http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg'/></div>
</body></html>
try this one! :)
You could probably achieve it using CSS3 webkit animations but the trade off is it will only work in the likes of Chrome and Safari but you won't require any JavaScript at all.
The jQuery suggestion above is your best bet here I guess.
You could use javascript's setTimeout or setInterval to do this, or look into JQuery's Timers
EDIT: With JQuery, this will change the background after 1 sec:
$(window).oneTime(1000, function() {
// change your background image here
});
You could do it with a function and setTimeout:
function changeBG()
{
var body = document.getElementsByTagName("body")[0];
body.style.backgroundImage = "url(myimage.gif)";
setTimeout("changeBG",30000); // Change every 30 seconds
}
window.onload = changeBG;
(untested so it might need a tweak or 2)
If you're using the Prototype library:
var changeBackground = function() {
$$('body').first().setStyle({
backgroundImage: 'newImage.jpg'
});
};
changeBackground.delay(15);
