Question

I hope someone can help me with this, I have this javascript code that toggles my body background

function changeDivImage() {
    imgPath = document.body.style.backgroundImage;
    if (imgPath == "url(images/bg.jpg)" || imgPath == "") {
        document.body.style.backgroundImage = "url(images/bg_2.jpg)";
    } else {
        document.body.style.backgroundImage = "url(images/bg.jpg)";
    }
}

I activate it with this link:

<a href="#" onclick="changeDivImage()">change</a>

my problem is that it works fine in IE and firefox, but in chrome, the links work twice then stop working, it basically switches to bg_2.jpg then once clicked again switches back to bg.jpg then it never works again :/

also, is there an easier way to accomplish this? css only maybe? basically i have two body background pictures and i want to be able to click on the link to toggle 1, then click again to toggle 2 instead, then back to 1, etc…

lastly, how can i make the two backgrounds fade in and out? instead of just switch between the two?

Answer 1

Use CSS classes!

CSS Rules

body { background-image: url(images/bg.jpg); }
body.on { background-image: url(images/bg_2.jpg); }

JavaScript:

function changeDivImage() {
    $("body").toggleClass("on");
}

If you want to fade, you will end up having to fade the entire page. Use can use jQuery’s fadeIn and fadeOut.