thickboxのtitleキャプション改行したい

質問

お世話になります。
どうかお力を貸してください。
Thicboxを使って画像をライブラリとして表示させているのですが、
その際に、下記のように、titleキャプションに多少長めの解説文を書き込みたいと思っているのです。

<a href="images/001.jpg" class="thickbox" title="拡大表示させる画像の説明< /br>
このコピーはだみーです。このコピーはだみーです。このコピーはだみーです。< /br>
このコピーはだみーです。このコピーはだみーです。このコピーはだみーです。">
<img src="images/thumb.jpg" alt="説明文" /></a>

が、titleタグを< /br>改行すると、ソース的に問題があるようです。またカーソルオンすると浮かんでくる注釈文にもはっきりと< /br>の表示が出てしまいます。
ですが、説明文の中でどうしても改行はしたいと考えています。
このような場合はどうしたらいいのでしょうか。
良い解決法、またもしjsなどをいじる必要があるのならどこをいじればいいのかもしご存知の方がいたら教えてください。どうかよろしくお願いします。

回答No.2

ORUKA1951 · ベストアンサー

＞ソースとしては間違っておりますし、
　いいえ、あなたの書かれたソースで、
・インライン要素であるIMG(画像)要素が、ブロック要素内にないこと
・タグ内に<br>を書いてはならない
ことを除けばあってます。その部分は修正しました。Validatorでチェックするとあっているはずです。

　title属性の内容を表示するのは　E:after{content:attr(attribute-name);}または、E:before{content:attr(attribute-name);}です。(Eはタイプセレクタ、attribute-nameは属性の名称です。

:hoverという動的な擬似クラスでマウスオンです。
:activeでクリックです。それと:focusを組み合わせると期待の動作になるでしょう。

　生成された内容のdisplay,position,size,z-indexなどは、普通に指定してください。

★生成内容、自動番号振り、リスト ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/generate.html )
(注)現行のCSS2.1で変更がいくつかあります。CSS2.1の邦訳は知りませんので、原文を確認してください。関連するプロパティは
　→12 Generated content, automatic numbering, and lists ( http://www.w3.org/TR/CSS2/generate.html )
　→'white-space' ( http://www.w3.org/TR/CSS2/text.html#propdef-white-space )
です。
　なお、改行コードは<br>ではなく、そのまま、または\Aで記述し、white-spaceで指定すること。改行と空白文字の扱いはCSS2.1では、ことなります。上記(white-space)を参照してください。
　normal,pre,nowrap,pre-wrap,pre-lineの５種類になります。

　javascriptで動作させる場合も、これらのスタイルシートを書き換えないと出来ません。いっそのこと、すべてCSSで行うほうが簡単な気がします。

お礼

いつも本当に親切にご回答ありがとうございます。
試してみたのですが、恐らく今回わたしが希望する見せ方とは少し違うのかな、という気がします。
わたしの説明の仕方が悪かったと思います、申し訳ありません。
http://okwave.jp/qa/q7268028.htmlのほうで詳しく画像付きで再度質問させていただきました。よろしければそちらのほうで今回の質問の意図を汲んでいただければ幸いです。それでもいつもご丁寧にご助言くださりありがとうございます。

回答No.1

ORUKA1951

p{position:relative;}
a.thickbox:hover:after{ content: attr(title);display:block;width:20em;position:absolute;top:10px;left:10px;white-space:pre-line;background-color:yellow;border:solid red 2px; padding:0.5ex 0.5em;}

<p><a href="images/001.jpg" class="thickbox" title="拡大表示させる画像の説明
このコピーはだみーです。このコピーはだみーです。このコピーはだみーです。
このコピーはだみーです。このコピーはだみーです。このコピーはだみーです。">
<img src="images/thumb.jpg" alt="説明文" /></a></p>

お礼

回答ありがとうございます！表現したいのはサムネール画像をクリックすると、大きな画像が中央で表示されその画像下の部分に説明文と、「close」というボタンが表示された時にsono
説明文を改行したい、ということです。デザイン上では問題なく見えるのですが、ソースとしては間違っておりますし、サムネール画像にカーソルオンすると自動でtitleタグの内容がキャプションで浮かんでくる？のでその時に< /br>という表示が出るので、それをなんとかなくしたいのですが...
うまく説明できなくて申し訳ないです。