5

NOTE: I finally found an exact duplicate question and good answer at: Get script path

I have a background-image defined with a path relative to my css file.

.my-image-class {
  background-image: url("../images/my_bg_image.png");
}

I would like change this path in JavaScript so that it now points to ../images/my_updated_bg_image.png. However simply changing the style declaration in JavaScript unfortunately changes the meaning of the relative path from the CSS location to the HTML location.

Is there a way to extract an absolute URL from a relative CSS URL?

If not is there a way to extract an absolute URL of the source of a currently running JavaScript function? This would give me the same information because my JS files are also relative to the images files.

Other solutions?

This is a similar question to javascript - How to use a image file relative to a url path? but the class swapping trick suggested there won't work for me because I actually have a variable list of these background images.

EDIT: Background info. The web app (Django based) is serving HTML content entirely separately from static js, image, and css files. The static content is in a

static/
  js/
  css/
  images/

file structure. So I know the relative relationships among these files. However the absolute URL's to the HTML content and the static content will likely be changing. So I don't want mix in hard coded URL's for HTML content into my js files if I can possibly avoid it. I'm getting the Django template from a 3rd party, so I'd also like to avoid editing that as well.

Community
  • 1
  • 1
mjhm
  • 16,497
  • 10
  • 44
  • 55
  • Not quite sure what you mean by "my JS files are also relative to the images files" but is there a reason why a given script would not know the absolute path to the image it's trying to swap in? Why would a given bit of JS code need to refer to an image relatively? You can always use `document.URL` to figure out the root of the site, you should know from there where to go in a script. – Jamie Treworgy Apr 03 '11 at 17:33
  • See added background info. Hope this answers your questions. Thanks for your interest. – mjhm Apr 03 '11 at 18:29
  • OK - I don't know anything about Django's architecture, but I'm assuming *something* knows the root from which a given content tree is being served. In asp.net, in order to support virtual directories, I just have the server render something like `app.rootUrl='/vdir/'` and use that whenever I need to know my place in JS. I wish it was easily available without having to do that, but an extra 20 characters on each page saves a lot of headaches :) – Jamie Treworgy Apr 03 '11 at 18:33
  • What is the js-code you use to change the background image url? – KooiInc Apr 03 '11 at 18:38
  • @Kooilnc. Just basic js stuff like my_div.style.backgroundImage='url("../images/my_updated_bg_image.png")' – mjhm Apr 03 '11 at 21:14

1 Answers1

3

URLs in CSS stylesheets are relative to the CSS file in which they appear (even if @imported). If they appear in HTML, they are relative to the base URL of the HTML file which is typically the URL of the HTML file, unless there is a <base href=...> element in the HTML.

So you need to figure out the absolute URL against which the relative URL is resolved and then calculate a relative URL for your image.

You might try seeing if the old image is being served from multiple different places. Lots of web servers accumulate cruft and perhaps you're just putting the new image in a logical, but still wrong, place.

EDIT:

There are a variety of options in between absolute and path relative ../foo style URLs.

Absolute paths: /images/myImage.png.

Protocol relative URLs: //my-domain.com/image/myImage.png

Either of these might let you strike a better balance between specifying as much as you need but no more.

Mike Samuel
  • 118,113
  • 30
  • 216
  • 245
  • See added background info. Hope it makes more clear what I'm after. – mjhm Apr 03 '11 at 18:30
  • Sorry, not exactly what I'm after. The css, images, and js are all served relative to one another, so in my perfect (possibly fairy tale) world there ought to be a way for the js to navigate the css and images paths without having to know anything a priori about absolute paths or anything else outside their common directory structure. – mjhm Apr 03 '11 at 23:19