0

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?

3
Contributors
7
Replies
8
Views
9 Years
Discussion Span
Last Post by ~s.o.s~
0

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

1

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">
0

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
}
0

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

0

> 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 topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.