リンクテキストやリンク画像にマウスオーバーすることで、
リンク先のURLのQRコードを自動で生成し、
ツールチップとして表示してくれるjQueryプラグイン「qrTip」。
久々にこれはかなり便利だと思ったプラグインだったのでご紹介。

qrTip: A jQuery Plugin to Display QR Codes for Links


qrTip: A jQuery Plugin to Display QR Codes for Links
DEMO:QR Tooltips for jQuery

デモページから確認できるように、
リンクテキストにマウスオーバーでQRコードが表示されます。
このQRコードは画像で用意するものではなく「Google Chart API」を使って
その都度生成しているもの。

使い方も至って簡単で、
jQuery本体ファイルとqrTipプラグイン用ファイル「qrtip-1.0-jquery.js」と
CSSファイル「qrtip-1.0-jquery.css」をページ上から読み込み、
実行するリンクに対して、下記の様に実行用スクリプトを指定するだけ。

◆SCRIPT
$(function(){
	$('a').qr({color: 'black',size: 80});
});

オプションで、QRコードのサイズとツールチップの枠の色が
変更可能となっています。

このプラグインを試してみると以下の様な感じに。
URLにマウスオーバーしてみてください。
※2つのリンクそれぞれQRの大きさやツールチップの色味を変更しています。
※ツールチップの出現場所の都合で上部に大きく余白を空けています。

qrTip:SAMPLE

ツールチップの出現する場所は、プラグインファイルをカスタマイズすることで変更も可能。

サイト上でのQRコードの見せ方含めて、
今後活用できそうです。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (2)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

マウスオーバーでリンク先URLのQRコードを自動生成してツールチップで表示してくれるjQueryプラグイン「qrTip」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner