javascript - 各画像の寸法をキャプションまたはラベルとして表示する

Question

ページ上の各画像をループしたい...

各画像について、画像の高さと幅を取得し、キャプション、ラベル、またはフリー テキストとして画像の上、下、または横に表示します。表示方法（キャプション、ラベル、フリーテキスト）、場所は問いません。

すべての「画像」要素をループして関数を呼び出し、画像の寸法 (image.width、image.height) を取得する方法を知っています。各画像の近くのページにその情報を表示する方法を知る必要があるだけです。表示テキストは、「幅×高さ」のようにシンプルに保ちます:220 x 144または220w x 144h.

「オンロード」の後にループを実行するか、実際にはボタンを押すことでループを実行するため、画像がロードされていることを確認することについて心配していません。

サンプルコードは次のとおりです。

function doit(){
  var o,p,q,r,s,t,u;
  o=document.images;
  p=o.length;
  if(p<1){
    alert("No images!");
    return 0;
  }
  for(q=0;q<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. */
  }
}

テスト目的で...このコードを次のようなJavascript関数としてラップしました:

javascript:(function(){function doit(){var o,p,q,r,s,t,u;o=document.images;p=o.length;if(p<1){alert("No images!");return 0;}for(q=0;q<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. */}}})()

そのため、「ブックマーク」に入れて、表示中の任意のページで試すことができます。私は（JQueryなしで）javascriptのみを使用してこれを行うことを望んでいます。