How To Change Image-background After Sometime?

August 30, 2023 Post a Comment

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 b

Solution 1:

you can make it with javascript function

<!DOCTYPE html><html><head><scripttype='text/javascript'>var imageID=0;
functionchangeimage(every_seconds){
    //change the imageif(!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 secondssetTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
</script></head><bodystyle='background:black;'onload='changeimage(2)'><divstyle='position:absolute;width:100%;height:100%;left:0px;top:0px;'align='center'><imgwidth='300px'height='250px'id='myimage'src='http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg'/></div></body></html>

try this one! :)

Solution 2:

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.

Solution 3:

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
  });

Solution 4:

You could do it with a function and setTimeout:

functionchangeBG()
{
    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)

Solution 5:

If you're using the Prototype library:

var changeBackground = function() {
   $$('body').first().setStyle({
      backgroundImage: 'newImage.jpg'
   });
};
changeBackground.delay(15);

JavaScript Guy