リンク要素をマウスオーバー時に画像表示する

Category
： Javascript

今回紹介する jQuery プラグインは、リンク要素にマウスオーバーした際に、画像やテキストをポップアップ形式で表示してくれます。

以前に似たようなプラグインを紹介しましたが、今回紹介するのがいろいろと応用も効くような気がします。

ダウンロード・使い方

Easiest Tooltip and Image Preview Using jQuery

共通要素 head内

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>

jquery.js は Google AJAX API を使えば良いと思います。main.js は任意の場所においてそこまでのパスを記述して下さい。

テキスト表示

使いたい要素に .tooltip と指定。title 要素がキャンプションとして表示されます。

XHTML

<p><a href="http://www.css-lecture.com/" class="tooltip" title="CSSリファレンス、(X)HTML、Movable Type、その他Webサイト制作に関する役立つ情報を掲載します！">CSS Lecture</a></p>

画像表示

使いたい要素に .preview と指定。title 要素がキャンプションとして表示されます。

XHTML

<a href="image/001.jpg" class="preview"><img src="image/001.jpg" alt="サンプル画像" width="150" />

<a href="image/001.jpg" class="preview" title="サンプル画像 1"><img src="image/001.jpg" alt="サンプル画像" width="150" />

URLプレビュー

使いたい要素に .screenshot と指定。rel 要素に画像へのURLを指定。title 要素がキャンプションとして表示されます。

XHTML

<p><a href="http://www.css-lecture.com/" class="screenshot" rel="image/css-lecture.jpg">CSS Lecture</a> (キャンプションなし)</p>
<p><a href="http://www.css-lecture.com/" class="screenshot" rel="image/css-lecture.jpg" title="CSS Lecture">CSS Lecture</a> (キャンプションあり)</p>