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

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

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

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

demo page

…ここからが続き

ダウンロード・使い方

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>

demo page

画像表示

使いたい要素に .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" />

demo page

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>

demo page

Comments

tomi

tomi

スミマセン! 再度質問なんですが、動きはOKでしたがimageにリンクカラーがついてしまっています。
のリンクの関係だと思うのですがどうすればこのimagesだけのリンクカラーを消せるのでしょうか?

2011年01月26日 17:07

tomi

tomi

お久しぶりです。っと言っても3年振りのご質問です。
Lightboxよりこちらに乗り換えようと思うのですが何せ久々なので要領を思い出せなくまたまたお助け願います。
Lightboxの記述 ソースは削除した方がよいのでしょうか?
Google AJAX APIもググって見てましたがなんとなくしかわからず仕事の暇な今時期に何とか成功を。

2011年01月26日 15:51

PhoenixWind

PhoenixWind

こんにちわ!+はじめまして!

実はこのサイトの大ファンですwいつもほんとに助かってます^^ありがとうございます!

今回はMIYAさんの作品を使わせていただいているので、書き込みました!ソースもわかりやすく、今後いろいろと手を加えていこうと思います!

これからもよろしくお願いします^^

2010年10月06日 12:54

gene

gene

MIYAさん

Firefox 3.6.10でこのデモページの動きがおかしいです。

1. キャプションなし->マウスオーバーする-キャプションでずに変数名を表示->キャプションなし->マウスオーバーする->当初の動き
続けて
2. キャプションあり->マウスオーバーする-キャプションでない->動きが違う
続けて
3. キャプションあり->マウスオーバーする-キャプションでない->当初の動き

でした

2010年10月05日 22:50

MIYA

MIYA

geneさんはじめまして!

動きがおかしいとありますが、それは自分が作ったデモページの動作がおかしいんでしょうか?

またブラウザについては特定のもののみ。表示がおかしいんでしょうか?

自分の環境化では今の所確認出来ない状態です。

2010年10月04日 14:41

gene

gene

こんばんは 初めまして
早速使わせていただこうとおもいました
画像付き:キャプション付きのものですが
最初にキャプションなしを触ると動きがおかしいようです。

1. キャプションなし->マウスオーバーする-キャプションでない->当初の動き
続けて
2. キャプションあり->マウスオーバーする-キャプションでない->動きが違う
続けて
3. キャプションあり->マウスオーバーする-キャプションでない->当初の動き

2010年09月29日 00:20

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article