944,045 Members | Top Members by Rank

Ad:
Jun 17th, 2007
0

change input's bg image with js

Expand Post »
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?
Similar Threads
Reputation Points: 13
Solved Threads: 1
Junior Poster in Training
Racoon200 is offline Offline
66 posts
since Nov 2006
Jun 17th, 2007
0

Re: change input's bg image with js

Post some code so we can easily help you out without rewriting the same thing over again.
Super Moderator
Featured Poster
Reputation Points: 3241
Solved Threads: 720
Failure as a human
~s.o.s~ is offline Offline
8,873 posts
since Jun 2006
Jun 19th, 2007
0

Re: change input's bg image with js

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
Reputation Points: 13
Solved Threads: 1
Junior Poster in Training
Racoon200 is offline Offline
66 posts
since Nov 2006
Jun 19th, 2007
1

Re: change input's bg image with js

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. function changeSrc(clicked)
  2. {
  3. changeme.backgroundImage = 'someotherimage.someformat')
  4. }

Put both the class and the id in the object with the background
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <body class="someclass" id="changeme">
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007
Jun 19th, 2007
0

Re: change input's bg image with js

Quote ...
function changeSrc(clicked)
{
clicked.style.backgroundImage = 'someotherimage.someformat' //this won't work in IE7!
}
Try this:
javascript Syntax (Toggle Plain Text)
  1. function changeSrc(clicked)
  2. {
  3. clicked.style.backgroundImage = "url(imageName)";
  4. //the above stmt assumes that the image is present
  5. //in the same path as that of the html file
  6. }
Super Moderator
Featured Poster
Reputation Points: 3241
Solved Threads: 720
Failure as a human
~s.o.s~ is offline Offline
8,873 posts
since Jun 2006
Jun 19th, 2007
0

Re: change input's bg image with js

and on purpose, anybody here knows a free js editor with line numbers and autocomplete?
Reputation Points: 13
Solved Threads: 1
Junior Poster in Training
Racoon200 is offline Offline
66 posts
since Nov 2006
Jun 19th, 2007
1

Re: change input's bg image with js

and thank ya very much s.o.s, your always helping the needed.
Reputation Points: 13
Solved Threads: 1
Junior Poster in Training
Racoon200 is offline Offline
66 posts
since Nov 2006
Jun 20th, 2007
0

Re: change input's bg image with js

> 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. ;-)
Super Moderator
Featured Poster
Reputation Points: 3241
Solved Threads: 720
Failure as a human
~s.o.s~ is offline Offline
8,873 posts
since Jun 2006

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Help needed working with prototype.js and php
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: javascript issue





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC