Hi. I have an input with a background image (done in css);
I want to change the background image with the click of a button.

How do it do it?

this is the input...
<input blah blah blah class='someclasss' onclick='changeSrc(this)'>

.someclass
{
background-image:url(someimage.someformat);
}

function changeSrc(clicked)
{
clicked.style.backgroundImage = 'someotherimage.someformat' //this won't work in IE7!
}

Manipulate the code freely. thanks

You need an id on the same object with someclass. That id becomes the target of the assignment statement:

function changeSrc(clicked)
{
changeme.backgroundImage = 'someotherimage.someformat')
}

Put both the class and the id in the object with the background

<body class="someclass" id="changeme">

function changeSrc(clicked)
{
clicked.style.backgroundImage = 'someotherimage.someformat' //this won't work in IE7!
}

Try this:

function changeSrc(clicked)
{
   clicked.style.backgroundImage = "url(imageName)";
   //the above stmt assumes that the image is present 
   //in the same path as that of the html file
}

and on purpose, anybody here knows a free js editor with line numbers and autocomplete?

> and on purpose, anybody here knows a free js editor with line numbers and autocomplete?
Yes, you can find it here. For its tutorials, see here.

> and thank ya very much s.o.s, your always helping the needed.
You are welcome, fellow Javascripter. ;-)

This article has been dead for over six months. Start a new discussion instead.