« 画像を使用しないで、ボックスの影をcssで表現する方法 | トップページ | 画像を使用しないで、ボックスの影をcss表現する方法 その2 »

2011年1月11日 (火)

ツールチップをリンクの要素にマウスオーバーさせるjQueryのプラグイン

新年あけましておめでとうございます。
本年もよろしくお願いいします。

昨年の夏が暑かったせいか、冬の寒さがよりいっそう厳しく感じられますね。

さて、本年の一回目はツールチップを表示させるプラグイン「Easiest Tooltip and Image Preview Using jQuery」をご紹介いたします。

デモページ

ダウンロード

使用するリソース
jquery.js
main.js

設定とhtmlファイルへの記述
<h2>Image gallery (without caption)</h2>
<ul>
<li><a href="1.jpg" class="preview"><img src="1s.jpg" alt="gallery thumbnail" /></a></li>
<li><a href="2.jpg" class="preview"><img src="2s.jpg" alt="gallery thumbnail" /></a></li>
<li><a href="3.jpg" class="preview"><img src="3s.jpg" alt="gallery thumbnail" /></a></li>
<li><a href="4.jpg" class="preview"><img src="4s.jpg" alt="gallery thumbnail" /></a></li>
</ul>

<h2>Image gallery (with caption)</h2>
<ul>
<li><a href="1.jpg" class="preview" title="Lake and a mountain"><img src="1s.jpg" alt="gallery thumbnail" /></a></li>
<li><a href="2.jpg" class="preview" title="Fly fishing"><img src="2s.jpg" alt="gallery thumbnail" /></a></li>
<li><a href="3.jpg" class="preview" title="Autumn"><img src="3s.jpg" alt="gallery thumbnail" /></a></li>
<li><a href="4.jpg" class="preview" title="Skiing on a mountain"><img src="4s.jpg" alt="gallery thumbnail" /></a></li>
</ul>

CSS
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;}

拡大表示させたい画像をリンク要素に設定します。
スクリーンショットの拡大画像では「Lake and a mountain」とキャプションがついています。
キャプションをつける場合は、リンク要素のtitle部分に記述をします。

他にもテキストのみのツールチップを表示などのバージョンもあります。

|

« 画像を使用しないで、ボックスの影をcssで表現する方法 | トップページ | 画像を使用しないで、ボックスの影をcss表現する方法 その2 »

jQuery」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1378074/38375869

この記事へのトラックバック一覧です: ツールチップをリンクの要素にマウスオーバーさせるjQueryのプラグイン:

« 画像を使用しないで、ボックスの影をcssで表現する方法 | トップページ | 画像を使用しないで、ボックスの影をcss表現する方法 その2 »