Change background image url

I am trying to change the background of the input button when clicked by using jquery but for the life of me, can't figure out the relative path to make it work.

js file is in root/js folder css file is in root/css folder

My code looks like this:

jQue开发者_StackOverflow中文版ry($button).css('background',"url(../images/updating_button.gif)");

But this just doesn't work...it can't find the image with that path. if I use absolute path it works obviously but i really need it to be relative.

I have tried all combination that I know like:

/images/updating_button.gif

..images/updating_button.gif

images/updating_button.gif

updating_button.gif

---

If the URL is static, you could declare a class with the background and maintain your relative path.

In your CSS:

.updating { background: url(../images/updating_button.gif); }

In your JS:

jQuery($button).addClass('updating');

---

You are aware that paths in any inline styles (whether set with JS or not) will be relative to the current HTML document (the URL on the browser's URL bar), not any other file, right?

And why are you avoiding absolute (or domain-relative) URLs?

---

I wish I could test this for you, but I've had some issues with the url property in the past; adding single quotes inside the url() has proved to be the most reliable with relative paths.

jQuery($button).css('background',"url('../images/updating_button.gif')");

Also, what does your file structure look like?

---

The following code might be useful for you:

 jquery("button").css("background-image","url(menubar/ajax-loader.gif)");