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:

jQuery($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 bination that I know like:
/images/updating_button.gif
..images/updating_button.gif
images/updating_button.gif
updating_button.gif

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:

jQuery($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 bination that I know like:
/images/updating_button.gif
..images/updating_button.gif
images/updating_button.gif
updating_button.gif

• javascript
• jquery
• css

• @Rick - What is the absolute path? I'm assuming your images folder is also inside root... is that correct? – jlmakes Commented Jan 31, 2011 at 7:37
• @Julian - abs path is localhost/wp-content/themes/theme/images/updating_button.gif – user381800 Commented Jan 31, 2011 at 7:40
• @Rick - Oh wow, Wordpress... okay, and what about the file this image is supposed to show up on? – jlmakes Commented Jan 31, 2011 at 7:43
• @Julian - its in localhost/wp-content/themes/theme/ – user381800 Commented Jan 31, 2011 at 7:44
• @Rick - Are there any other relative paths to images you can reference? – jlmakes Commented Jan 31, 2011 at 7:44

4 Answers 4

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