3

Is there a way to use a image url relative path in a javascript file (just like the css files)?

for testing i used 2 divs and displayed a gif in background using css in 1st and using js in second:

-my file directory is: root/index.html

root/module1/test.css

root/module1/test.js

root/module1/img.gif

-index.html code:

<html>
  <head>
    <link href="module1/test.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <P id="p1"> Line 1 </P>
    <P id="p2"> Line 2 </P>
    <script type="text/javascript" src="module1/test.js"></script>
  </body>
</html>

-test.css code:

#p2 {background: url('img.gif')}

in the css I can use the relative path.

-test.js code:

document.getElementById("p1").style.backgroundImage = 'url(./module1/img.gif)';

but in the js I have to use the absolute path or it doesn't work.

-img.gif - you can use any gif image.

I've tried to search the web but I was just getting confused :(

plz help :)

Ps: if you know a solution in jquery i also appreciate.

Seeker
  • 365
  • 1
  • 6
  • 16

3 Answers3

3

In a CSS style sheet, the path is interpreted relative to the style sheet.

If you specify a path later, using JavaScript, it will be interpreted relative to the document.

You can still use relative paths, but, as said, they will have to be relative to the document. So it would have to be 

url("module1/img.gif");

But you already know that.

I don't know a way of building paths relative to the style sheet outside the style sheet.

The only workaround that comes to my mind is to define a class inside the style sheet and, instead of specifying a background image using javaScript, changing the element's class.

In the style sheet:

.p2_img_gif {background: url('img.gif')}

and when the time comes for the paragraph to get the background image, do a 

document.getElementById("p2").className = "p2_img_gif";

if you need to toggle classes, or specify multiple ones, consider using jQuery's addClass() and removeClass().

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
  • Good idea. I didn't remember that one. I still prefer to find a solution were I can just use the javascript instead of declaring it in the css, but if i don't find out it's also a decent way to solve it. tanks :) – Seeker Aug 31 '10 at 23:00
1

As variant use element inline style

var element = document.getElementById("p1");
var imageUrl = './module1/img.gif';
element.setAttribute('style', 'background-image: url(' + imageUrl +');');
Bohdan Lyzanets
  • 1,652
  • 22
  • 25
0

This works for me with Firefox 3.6.

<!doctype html>
<style>
div { background: red; width: 80px; height: 80px }
</style>
<script>
window.onload = function() {
  document.getElementById("test").style.backgroundImage = 'url("green.png")';
}
</script>
<p>There should be no red.</p>
<div id="test"></div>

where green.png is a green pixel. Which browser are you using?

zwol
  • 135,547
  • 38
  • 252
  • 361
  • your code works ok, but it doesn't reflects my situation. The problem happens when the javascript code(/file) and the html file are in different directories. I wanted to use 'url(img.gif)' in the js file but it wont work (like it works in the css file). I'm using Firefox 3.6.8, IE8.0.6001.18702, and chrome 5.0.375.127 – Seeker Aug 31 '10 at 22:52
  • Try using Firebug's Net panel to see what the browser is trying to load. I bet it's trying to load *something*, but interpreting the URL relative to something other than what you thought it would (like Pekka says). – zwol Sep 01 '10 at 15:55
  • Using the above code, it doesn't shows me a thing in the Firebug's Net panel -> All tab. Anyway I've adopt the concept that Pekka suggests it works just great in my site using jquery. – Seeker Sep 06 '10 at 15:57