How to change image-background after sometime? - javascript

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

Related

I'm a bit lost on DOM manipulation

Alright. As a part of a personal project to get familiar with Javascript, css and html outside of tutorials I've decided to try to create a cookie clicker like game for fun. However, I'm a bit stuck on the DOM manipulation.
var multiplier=1;
var money=5;
var moneyTotal=money*multiplier;
$(document).ready(function() {
$('div #button').click(function() {
var money++;
});
});
document.getElementById('counter').innerHTML = moneyTotal;
What I'm trying to do is having some text in my html index page, that changes whenever you click the div with the ID button. That piece of text has the id counter. But I can't seem to make this work, and I'm starting to get really frustrated after having this problem for 4 hours and not finding a solution. I have a feeling I'm missing some very obvious syntax, but I have no idea on what.
Edit:
Alright I changed the code so that it looks like this now:
var multiplier=1;
var money=5;
$(document).ready(function() {
$('#button').click(function() {
money++;
$('#counter').html(money * multiplier);
});
});
However it still won't target my div with the ID counter.
Here's the index.html, but I'm 99% sure there's no syntax errors there, and I have no idea on why it won't work.
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='script.js'></script>
<link rel='stylesheet' type='text/css' href='style.css'/>
</head>
<body>
<div id="button"></div>
<div id="counter">0</div>
</body>
</html>
Edit:
This is the final solution, thanks again everyone!
var mp = 1
var money = 0
$(document).ready(function() {
var localMoney = localStorage.getItem("money");
var localmp = localStorage.getItem("mp")
$('#moneycounter').click(function() {
money++;
$('#counter').html(money * mp);
});
});
I'm not sure what you're expecting it to do...
But var money +1 is wrong. Should be money++
Then you have to recalculate moneyTotal, and set it into the innerHTML at that point.
You need to run the function to update your div everytime you click!
var multiplier=1;
var money=5;
var moneyTotal=money*multiplier;
$(document).ready(function() {
$('div #button').click(function() {
money++;
updateElement();
});
});
function updateElement(){
document.getElementById('counter').innerHTML = moneyTotal;
}

Add a fading effect to inside my JavaScript function

I have a JavaScript function to display images in a slideshow by changing the source. I have tried to create smth to include a fadeIn effect but I think it was catastrophic..Here is my JavaScript function. I don't need a complete answer, just some tips helping me to achieve that. I'm a very beginner in JavaScript but I want to learn it well. If there is a way to do that without jQuery, it would be nice, or to include jQuery directly inside this function will be the best.
{
function nextImage() {
if (currentImage < 5) {
currentImage = currentImage + 1;
} else {
currentImage = 1;
}
document.getElementById('image').src = 'images/' + currentImage + '.jpg';
}
}
Naturally, what the fadein will be adapt as a fadeout in the opposite function, but I think this example can help a newbie like me.
with jquery it would go something like this:
function nextImage() {
if (currentImage < 5) {
currentImage = currentImage + 1;
} else {
currentImage = 1;
}
$("#image").fadeOut('fast', function() {
$("#image").attr('src','images/' + currentImage + '.jpg');
$("#image").fadeIn('fast');
});
}
I don't think it's a stupid question, though for whatever reason my own questions get downvoted, go figure! (end rant)
You might consider if you are able to use CSS there are CSS3 fade transitions that you can try.
If you were to do it in Javascript I would probably use jQuery to do it because those functions are already there and all you have to do is use .show('slow') and .hide('slow') and that argument 'slow' will automatically do the animation for you.
http://api.jquery.com/show/
Otherwise if you want to write it from scratch, then you can probably look at the jQuery source code to see how the actual animation effect is done.
You should JQuery as they have made it very easy to do the effects:
http://api.jquery.com/category/effects/fading/
Take a look at their examples and documentations
Here is an example:
Examples:
Example: Animates hidden divs to fade in one by one, completing each animation within 600 milliseconds.
<!DOCTYPE html>
<html>
<head>
<style>
span { color:red; cursor:pointer; }
div { margin:3px; width:80px; display:none;
height:80px; float:left; }
div#one { background:#f00; }
div#two { background:#0f0; }
div#three { background:#00f; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<span>Click here...</span>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<script>
$(document.body).click(function () {
$("div:hidden:first").fadeIn("slow");
});
</script>
Some tips on how to start using JQuery:
var a = $(document); // <-- set the hole document to variable a
var b = $("#myid"); // <-- set the element that has id="myid" to variable b
var c = $(".myclass"); // <-- set the element(s) that has class="myclass" to variable c
var d = $("img"); // <-- set the img element(s) to variable d
Use Chrome Web Inspector or Firebug to debug your JavaScript code

Change image in document.body

I want to change the background of the html page with the following function:
<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds){
//change the image
if(!imageID){
document.body.src="1.jpg";
imageID++;
alert(imageID++);
}
else{if(imageID==1){
document.body.src="2.jpg";
imageID++;
alert(imageID++);
}else{if(imageID==2){
document.body.src="3.jpg";
imageID=0;
alert(imageID++);
}}}
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
</script>
<body onload="hidemenu(); testPage(); changeimage(2)">
</body>
But it wont. I know there is syntax error in document.body.src but can anyone tell me what is the correct way to change as the background image is coming through css.
the body does not have an attribute named src. try changing the style attribute:
document.body.setAttribute('style', 'background-image: url(1.jpg)');

when mouse over image slide is start as gif image

I have 5 images in a same folder.
1.jpg,2.jpg,3.jpg,4.jpg,5.jpg
I will be show only one image on my webpage.
example
<body>
<img src="1.jpg">
</body>
when visitor is mouse over on image, image will be change to 2.jpg and,3.jpg and....will be stop at 5.jpg.Slideshow is similar as a gif image.
Please How to write javascript or jquery .
Please tell me simplest way.
Thank my dear friend.
I found simalor question in this website.But I can't found complete answer for me.
If this question is duplicate, so sorry
please forgive me for my poor english useage.
You can use jQuery's hover event and pass in the onenter and onout methods. On enter you can call and setup an interval to increment the number of your image, and on out you want to stop it by clearing your interval.
<!DOCTYPE html>
<html>
<head>
<title>image</title>
</head>
<body>
<img id="img" src="1.jpg" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
var interval = null;
function changeImage(){
var nextNum = parseInt($('#img').attr('src').replace('.jpg',''), 10) + 1;
// If you want it to repeat back to 1 after 5
nextNum = nextNum > 5 ? 1 : nextNum;
$('#img').attr('src', nextNum+'.jpg');
}
$('#img').hover(
function(){
// Call change Image every 50ms
interval = setInterval(changeImage, 50);
changeImage();
},
function(){
// Stop the call
interval && clearInterval(interval);
}
);
</script>
</body>
</html>​​​​​​​​​​​​

Background Image Rotator

I need some suggestions and ideas to improve a background image rotator.
The script as of now is very basic but I'm looking to change 2 thing.
I want the images to fade into each other.
I need to be able to preload the images so it doesn't have the delay when loading them when they first display.
Thoughts?
<script type="text/javascript">
var images = ['bg1.png', 'bg2.png', 'bg3.png'];
var curImage = 0;
function switchImage()
{
curImage = (curImage + 1) % images.length
document.body.style.backgroundImage = 'url(images/' + images[curImage] + ')'
}
window.setInterval(switchImage, 5000);
</script>
Example: http://www.nickersonweb.com/demo/PMS/index.html
For fading, try fadeOut() and fadeIn() with jQuery. (Demo and documentation here: http://api.jquery.com/fadeOut/, http://api.jquery.com/fadeIn/)
For preloading, trying making an invisible image somewhere on the page, like this:
<img src='bg1.png' width="0" height="0">
Another way to preload the images is using javascript to create an image object. Here's the code I used for something similiar.
var imgnum=0;
var imgsrcs=new Array("imgs/img1.jpg","imgs/img2.jpg")
var fimgs=new Array();
var imgid="imgid";
function timedCount()
{
$("#"+imgid).fadeTo(1000,0,function(){newimage();
});
setTimeout(timedCount,5000);
}
function newimage()
{
imgnum=(imgnum+1)%imgsrcs.length;
document.getElementById(imgid).src=fimgs[imgnum].src;
$("#"+imgid).fadeTo(1000,1);
}
function initializeslideshow()
{
var i;
for(i=0;i<imgsrcs.length;i++)
{
fimgs[i]=new Image(270,270)
fimgs[i].src=imgsrcs[i];
}
}
initializeslideshow();
setTimeout(timedCount,5000);
You'll need to link to jQuery (and jQuery UI, I think) to use the code above, like this, for instance:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>

Categories