ansaurus

Question

Answer 1

+1 A:

The following code should take care of it.

var current_bg = 'green';

function changeDivImage()
{

    if(current_bg == 'green')
    {

        current_bg = 'blue';

    }
    else
    {

        current_bg = 'green';

    }

    document.getElementById("div1").style.backgroundImage = "url('"+current_bg+".png')";

}

2010-09-26 16:13:01

Thats right, thanks!

TRAVA 2010-09-26 16:24:13

Answer 2

A:

You probably need to quote the url, that is

backgroundImage = "url('blue.png')"

I would guess the browser is doing that for you now, which makes the comparison fail. A guess.. A more stable solution might be to maintain a variable to keep track of the current background image instead of comparing strings in css properties.

Alexander Sagen 2010-09-26 16:13:53

No, quotes are not neccessary.

TRAVA 2010-09-26 16:23:30

Answer 3

+3 A:

Some browsers are likely giving you the absolute path to the image instead of the relative path you are providing.

Instead of ==, test for the indexOf() position of the url.

Example: http://jsfiddle.net/7Rp2G/2/ (click the button several times to see the url change)

function changeDivImage() {
    var imgPath = new String();
    var div = document.getElementById("div1");
    imgPath = div.style.backgroundImage;

    div.style.backgroundImage = (imgPath.indexOf("blue.png") > -1 || imgPath == "") 
                              ? "url(green.png)" 
                              : "url(blue.png)";

}

EDIT: Updated to replace the if() with a ternary.

patrick dw 2010-09-26 16:20:58

I'll try, thanks for advice.

TRAVA 2010-09-26 16:25:15

Thats works too, thanks!

TRAVA 2010-09-26 16:43:19

ansaurus

tags:

views:

answers:

JS element style switching

related questions