title: Change img src path based on screen resolution
body: <p>I was wondering if it is possible to use CSS media queries to update the path to an img's src.</p>
  
  <p>The code below is run in a loop to set this.  But I want to use the buttons in a "large" folder if the screen resolution is above a certain value.  </p>
  
  <pre><code>var $btnImg = $("&lt;img&gt;", {
      id : "toolbar_button_" + button.widgetId + "_image",
      src : "images/toolbar/buttons/" + button.imageFileName,
      alt : button.displayName,
      "unselectable" : "on"
  });
  </code></pre>
  
  <p>i.e. I would like the src attribute to be:</p>
  
  <pre><code>src : "images/toolbar/buttons/large" + button.imageFileName,
  </code></pre>
  
  <p>Can this be done via CSS where I am already capturing the screen resolution for other styling?  Or can this only be done using JavaScript, e.g. jQuery?</p>
  
  <p>Many thanks for any help.</p>