qtipの使い方について

qtipのデモを参考に画像の表示まではできたのですが複数の画像を指定する事ってできないでしょうか？
http://craigsworks.com/projects/qtip/demos/conte …

具体的には・・・

<div id="content" class="default">
<ul>
<li><a href="#">1の画像</a></li>
<li><a href="#">2の画像</a></li>
<li><a href="#">3の画像</a></li>
</ul>
</div>

<script type="text/javascript">
$(document).ready(function() {
$('#content a[href]').qtip({
// ここで1の画像、2の画像、3の画像を指定したいのですが方法がわかりません。試しに
以下のようにしてみましたが当然の事ながら3の画像が適応されます。
content: '<img src="1.jpg" alt="1の画像" />'
content: '<img src="2.jpg" alt="2の画像" />'
content: '<img src="3.jpg" alt="3の画像" />'
});
});
</script>

<script type="text/javascript" src="jquery.qtip-1.0.0-rc3.js"></script>

#content内でそれぞれの画像を指定するにはどうすればいいでしょうか？宜しくお願い致します。

No.2 ベストアンサー 回答者： fujillin 回答日時： 2009/06/15 20:02

No1です。

こんな感じでいけると思うけど？
（CSSその他は適宜設定してください。）

◆1番目の方法なら
<script type="text/javascript">
$(document).ready(function() {
$('#L1 a[href]').qtip({content: '<img src="1.jpg" />'});
$('#L2 a[href]').qtip({content: '<img src="2.jpg" />'});
$('#L3 a[href]').qtip({content: '<img src="3.jpg" />'});
});
</script>

<div>
<ul>
<li id="L1"><a href="#">1の画像</a></li>
<li id="L2"><a href="#">2の画像</a></li>
<li id="L3"><a href="#">3の画像</a></li>
</ul>
</div>

◆2番目の方法なら
<script type="text/javascript">
$(document).ready(function() {
$('#content a[href]').each(function() {
$(this).qtip({
content: '<img src="' + $(this).attr('tooltip') + '" />'
});
});
});
</script>

<div id="content" class="default">
<ul>
<li><a href="#" tooltip="1.jpg">1の画像</a></li>
<li><a href="#" tooltip="2.jpg">2の画像</a></li>
<li><a href="#" tooltip="3.jpg">3の画像</a></li>
</ul>
</div>

この回答へのお礼

画像が結構多いので2の方法で試したところ問題なく動作させることができました！
詳しく教えて頂きまして本当にありがとうございました！

お礼日時：2009/06/15 20:20

No.1 回答者： fujillin 回答日時： 2009/06/15 09:29

実験で確認してませんが…

◆数が3個程度なら、idを変えるなどして、それぞれ個別に指定してあげればいいのでは？

◆数が多いときは、srcをタグ内に記しておいて（適当な属性を利用、altでもtooltipでも）、それを参照するようにしてあげれば、わざわざ個別にする必要もなさそう。　以下の例の定義方法が参考になると思うけど…
　http://craigsworks.com/projects/qtip/demos/conte …

この回答へのお礼

お返事ありがとうございます。参考にしながらやってみたのですがどうもうまくいきません。
tooltip="<img src="画像のパス">"としてみましたが思うような動作にはならない状態です。
全くわからない状態でとりあえず試しているような状態なのですがどのようにすればいいものか
おわかりになりますでしょうか？

お礼日時：2009/06/15 17:56