※以下、当初「alt属性を重畳表示」していたものを「title属性を重畳表示」
　に修正して再アップしました。[2007/3/26]

表題の内容を実現するためのjavascriptライブラリを作ってみました。
似たようなことをうまく解決できる方法を見つけられなかったので、
久しぶりに週末プログラミング。なかなか楽しかったです。

作ってみたのは、htmlページの中から簡易CSSセレクタでimg要素を選択して、
選択されたimg要素について、title属性を画像に無理やり重畳表示する機能。
動作例は、こんな感じです。
ここで動作確認がてら使い始めたばかりで、
まだまだ問題のある可能性が高いですが、折角なので公開しておきます。
あらかじめ断っておきますが、ご利用はあくまで自己責任で。

imgtitle_v1.zip

以下、使い方を簡単にご紹介。
興味のある方は、是非ご試用の上、ご意見・ご要望などお寄せください。


[1]
上のZIPファイルを解凍して得られる「imgtitle.js」「imgtitle.css」を
適当な場所にアップ。

[2]
htmlページのheader要素内に以下の二行を追加。

<link rel="stylesheet" type="text/css" href="imgtitle.css" />

<script type="text/javascript" src="imgtitle.js"></script>

[3]
onLoad時にimgtitle関数を呼び出すように設定。
例えば、header要素内に以下を追加する。

<script type="text/javascript">

<!--

  window.onload=function(){

    imgtitle(セレクタ,オプション文字列);

    imgtitle(セレクタ,オプション文字列);

        ：

  }

// -->

</script>

ここで、セレクタとは、img要素を抽出するための簡易CSSセレクタで、
現時点では以下の5パターンが利用可能。
「img」「img#id」「tag#id img」「img.class」「tag.class img」
文字列で指定してください。
セレクタで指定された全imgについて、title属性を画像に重畳表示します。
また、おまけとして、title属性とは別の文字列をオプション文字列として指定して、
画像へ重畳表示できます。
オプション文字列の方は省略可能です。

[4]
「imgtitle.css」を適宜修正することで、重畳表示の仕方を制御できます。
簡単な構造なので、ちょっといじれば理解してもらえると思います。

[注]
まだバグや問題が残ってると思いますが、
それ以前に以下の二つの制限事項には注意してください。

• 処理対象のimg要素は、
  スクリプト実行時にdivで囲ってブロック要素化します。
• 元のimg要素に設定された属性（縦横サイズなど）やスタイルは、
  alt属性以外すべて無視します（alt属性だけは維持します）。

というわけで、既存のページに適用すると、
レイアウトが多少（場合によっては非常に）乱れるので、ご注意を。
特に既存のページへ適用する場合には、「imgtitle.css」の修正だけでは
所望のレイアウトを実現できない場合があるかと思います。