Is there a way to reference an image URL using a relative path in a JavaScript file similar to CSS files?
To test this, I created two divs and displayed a gif in the background using CSS in one and using JavaScript in the other:
-My file directory structure is as follows: 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 file, I am able to use the relative path successfully.
-test.js code:
document.getElementById("p1").style.backgroundImage = 'url(./module1/img.gif)';
However, in the JavaScript file, I have to use the absolute path or it will not work correctly.
-img.gif - you can use any GIF image of your choice.
I have tried searching online for a solution, but I only ended up feeling more confused. If anyone could provide guidance, that would be greatly appreciated.
Ps: If you know of a jQuery solution, please share as well.