Changing background image to a button

Question

I am trying to change the backgound-image of a button but it doesn't work as I thought !! the CSS is OK and it is as follows :

#ITA
{
    float: right;
    margin: 5px 85px;
    width: 40px;
    height: 40px;
    background: #FFFFFF url("../ITA_off.png") center center no-repeat;
    border: 0;
}

my javascript function in the "HEAD" is

function cambiaBandiera() {
    test=document.getElementById("ITA");
    test.backgroundimage="ITA_on.png";
}

and the button is as follows

<input type="button" id="ITA" onClick="cambiaBandiera()" />

What's wrong ?

Please HELP !

Thanx in advance

Alex

Answer 1

The i in backgroundimage should be capital eg backgroundImage, try this:

function cambiaBandiera() {
 test=document.getElementById("ITA");
 test.backgroundImage="url(ITA_on.png)";
}

You are trying to change the background-image but - is special character in javascript, for this reason, it should be stripped and first letter of ending word should be capitalized.

Make sure that you have an element with id ITA on your page.

Answer 2

test.style.backgroundImage = "url(foo.png)"