Question

178

javascript - How to use a image file relative to a url path?

rated 0 times [ 185] [ 7] / answers: 1 / hits: 22507 / 14 Years ago, tue, august 31, 2010, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

beatriceisabelad

Add To Favorites

Follow

Total Points: 710

Total Questions: 107

Total Answers: 99

Location: Cayman Islands

Member since Sat, Sep 17, 2022

2 Years ago

answered 14 Years ago masonm · Accepted Answer

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().