title: Relative Paths in Javascript in an external file
body: <p>So I'm running this javascript, and everything works fine, except the paths to the background image. It works on my local ASP.NET Dev environment, but it does NOT work when deployed to a server in a virtual directory.</p>
  
  <p>This is in an external .js file, folder structure is</p>
  
  <pre><code>Site/Content/style.css
  Site/Scripts/myjsfile.js
  Site/Images/filters_expand.jpg
  Site/Images/filters_colapse.jpg
  </code></pre>
  
  <p>then this is where the js file is included from</p>
  
  <pre><code>Site/Views/ProductList/Index.aspx
  
  $("#toggle").click(function() {
      if (left.width() &gt; 0) {
          AnimateNav(left, right, 0);
          $(this).css("background", "url('../Images/filters_expand.jpg')");
      }
      else {
          AnimateNav(left, right, 170);
          $(this).css("background", "url('../Images/filters_collapse.jpg')");
      }
  });
  </code></pre>
  
  <p>I've tried using <code>'/Images/filters_collapse.jpg'</code> and that doesn't work either; however, it seems to work on the server if I use <code>'../../Images/filters_collapse.jpg'</code>.</p>
  
  <p>Basically, I want have the same functionallity as the ASP.NET tilda -- <code>~</code>.</p>
  
  <p><strong>update</strong></p>
  
  <p>Are paths in external .js files relative to the Page they are included in, or the actual location of the .js file?</p>