---

専門的に書くならば、任意のクラス名を付けたブロック要素＜div＞内にあるimg要素のtitle属性内容を画像の下に表示させる為のJavaScriptです。
本来title属性の内容はツールチップとしてポップアップされるものですが、私個人の好みで画像のキャプションとして表示する様にしてみました。

●設置方法

function addCaption() {
var block_class = 'image_block'  /* 画像を含むブロックのクラス名を指定 */
var elements = document.getElementsByTagName('img'); 
var elements2 = document.getElementsByTagName('div'); 
var v = 0;
for (i = 0; i < (elements2.length-1); i++) { 
   var img_title = elements[i-v].getAttribute('title');
   var block = elements2[i].getAttribute('class');
   var block = elements2[i].className;
   if (block == block_class) { 
     var p = document.createElement('p'); 
     p.setAttribute('title', img_title);
     p.appendChild(document.createTextNode(img_title)); 
     elements2[i].appendChild(p); 
   } 
   else if (img_title != 0 && img_title != null && img_title != '') {
     v = v + 1
   } 
 } 
}
function addEvent(obj, evType, fn){ 
 if (obj.addEventListener){ 
   obj.addEventListener(evType, fn, true); 
   return true; 
 } else if (obj.attachEvent){ 
   var r = obj.attachEvent("on"+evType, fn); 
   return r; 
 } else { 
   return false; 
 } 
} 
addEvent(window, 'load', addCaption);

上記のJavascriptソースを「caption.js」などと名前を付けてアップロードしてから、本文HTMLのヘッダあたりに

<script type="text/javascript" src="パス名 caption.js"></script>

と記述して読み込ませて下さい。

間違いがなければ、「image_block」というクラス名のブロック要素内にあるimg要素のtitle属性内容が画像の下に表示されるはずです。

例えば以下のHTMLを記述すると、

<div class="image_block">
<a href="http://www.flickr.com/photos/noto_kawaiiyo_kawaiiyo_noto/60053715/" title="Photo Sharing">
<img src="http://static.flickr.com/33/60053715_74ac775d86_m.jpg" width="179" height="240" alt="秋葉原駅の不可解なホーム" title="どうやって並んだらええのん？" />
</a>
</div>

この様にtitle属性内容が画像のキャプションとして表示されます。
キャプションの内容はp要素ですので、スタイルシートに

.image_block p  {color: #686868;font-size: x-small;text-align: center }

などと記述して見栄えを調整してみてください。

●解説

これは元々blockquoteのcite属性の内容を表示させる為のJavaScriptだったものに手を加えて作ったものです。
注意すべき点として、ページ内のimg要素のtitle属性内容が、一つでも空白だったり無かったりすると正常に表示できないというのがあります。ブロックの外にあるimg要素のtitle属性内容もきちんと指定していただく様お願いします。心許ない仕様ですがご了承下さい。

実はこのJavaScriptの本当の目的はFlickrのHTML badgeから呼び出した画像のタイトルを読み込む事だったりします。
JavaScriptの基本的な事すら学んでいない素人の自分が作ったものですので、出来れば詳しい方による改良を望みます。

---

---

Name:

Email Address:

URL:
Remember Me? YesNo

Comments:

---