title: Displaying dimensions of each image as caption or label
body: <p>I want to loop through each image on a page...</p>
  
  <p>For each image, get the height and width of the image, and display it as either a caption or label or free-text, located above or below or next-to the image. The display method (caption, label, free-text) and location don't matter, whichever is easiest is OK.</p>
  
  <p>I know how to loop through all "image" elements and call a function and get the image dimensions (image.width, image.height). I just need to know how to display that information on the page near each image. I'll keep the display text simple, just "width x height", like: <code>220 x 144</code> or <code>220w x 144h</code>.</p>
  
  <p>I'm not worried about making sure the images are loaded, because I'll execute the loop after "onload", or actually, more likely, by a button press.</p>
  
  <p>Here is some sample code:  </p>
  
  <pre><code>function doit(){
    var o,p,q,r,s,t,u;
    o=document.images;
    p=o.length;
    if(p&lt;1){
      alert("No images!");
      return 0;
    }
    for(q=0;q&lt;p;q++){
      r=o[q];
      s=r.src;
      t=r.width;
      u=r.height;
      y=t+'w X '+u+'h'
      /* OK, I now have the image height and width. */
      /*I need to know how to insert 'y' as a 'caption' near each image. */
    }
  }
  </code></pre>
  
  <p>For test purposes... I have wrapped this code as a Javascript function like:  </p>
  
  <pre><code>javascript:(function(){function doit(){var o,p,q,r,s,t,u;o=document.images;p=o.length;if(p&lt;1){alert("No images!");return 0;}for(q=0;q&lt;p;q++){r=o[q];s=r.src;t=r.width;u=r.height;y=t+'w X '+u+'h'/* OK, I now have the image height and width. I need to know how to insert 'y' as a 'caption' near each image. */}}})()
  </code></pre>
  
  <p>so I can put it in a "bookmark" to try it on any page I am viewing. I'm hoping to do this using only javascript (without JQuery).</p>