title: Load images based on screen size
body: <p>I have the following HTML code which displays an image:</p>
  
  <pre><code>&lt;div&gt;
       &lt;img id="wm01" alt="PP" title="PP" u="image" src="theImages/wm01.jpg" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I am trying to do is display a different image depending on the screen size. So first I hide the image with CSS:</p>
  
  <pre><code>#wm01 {
      display: none;
  }
  </code></pre>
  
  <p>And then in my BODY, I add the following code:</p>
  
  <pre><code>var w = window,
  d = document,
  e = d.documentElement,
  g = d.getElementsByTagName('body')[0],
  x = w.innerWidth || e.clientWidth || g.clientWidth,
  y = w.innerHeight|| e.clientHeight|| g.clientHeight;
  if (x&lt;568) {
      //alert(x);
      document.getElementById("wm01").src="theImages/wm01_app.jpg";
      document.getElementById("wm01").style.display = "block";
  }
  else {
      document.getElementById("wm01").src="theImages/wm01.jpg";
      document.getElementById("wm01").style.display = "block";
  }
  </code></pre>
  
  <p>The image is not showing in any size screen. How can I fix it?</p>