Member Avatar for Racoon200

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
  • 191 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by ~s.o.s~

Recommended Answers

All 7 Replies

Member Avatar for ~s.o.s~

Post some code so we can easily help you out without rewriting the same thing over again.

Member Avatar for Racoon200

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

Member Avatar for MidiMagic

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">
Member Avatar for ~s.o.s~

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
}
Member Avatar for Racoon200

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

Member Avatar for Racoon200

and thank ya very much s.o.s, your always helping the needed.

Member Avatar for ~s.o.s~

> 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. ;-)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.