検索結果: 大阪 ホームページ制作 Signature! - STUDY STYLE -

タグ「jQuery」 の検索結果(1/1)

2009年10月17日

リンク先のサムネイルをプレビュー表示させるjavascript

ツールチップ形式でリンク先やサムネイル画像を拡大表示させることができると、閲覧者はページ遷移なしにリンク先や画像のイメージをつかむことができます。

クリックなしにイメージをつかめるというのは、結果的にクリックへ誘導させることができる可能性もあります。

そこで見つけたのが、リンクや縮小画像にウスオーバーするとそのリンク先のサイトの画像サムネイルや拡大画像ががツールチップのようにポップアップするjQueryのプラグインです。



拡大したときの画像や、リンク先のスクリーンショットの画像は自分で用意しなければなりません。

画像はともかくリンク先のスクリーンショットまで用意するのは面倒です。

そこで、無料のサイトのスクリーンショットのサムネイル作成サイトを利用して連携させると、もっと手軽に導入することができます。

サムネイル作成サービス HeartRails Capture

などを使います。使い方詳細はサイトを見て欲しいのですが、このプラグインで表示させる画像は「rel="ファイル名"」という記述を<a>要素にいれます。

そこで、

rel="http://capture.heartrails.com/180x150(縦横サイズ)/?見せたいリンク先URL"

というような記述を入れると、わざわざスクリーンショットを撮らなくても、サムネイル画像を表示させることができます。
上記サイトは英語なので日本語で解説しているサイトを併記します。


ツールチップとして、デザインもシンプルですし、かなり有効に使えるのではないかと思います。