Hovercard

テキストにマウスオーバーすると、facebookやTwitterのプロフィールを取得して表示してくれるのがこのjQueryプラグイン「Hovercard」です。

facebookやTwitterでなくても、任意のテキストなどの情報を表示させることもできます。

サンプルを作ってみました。

→ facebookやTwitterのプロフィールをマウスオーバーして表示させるjQueryプラグイン「Hovercard」サンプル

ユーザーIDを指定してあげるだけで表示してくれるので、設置してしまえば簡単に利用できます。


【設置方法】
まずはこちらのHovercardのサイトから、jsファイルをダウンロードします。ダウンロードされないときは右クリックで「リンク先を保存」でダウンロードしてください。jquery.hovercard.min.jsファイルがダウンロードされます。

body部の最後にJavaScriptの記述をします。今回は任意のテキスト、facebook、Twitterを表示させてみます。

以上で準備完了です。表示させたいところに次のようにソースを書きます。

文章の中や、スペースがないところに付加情報を表示させたいときに活用できそうです。ちなみにTwitterアカウントは有名人などの公式アカウントでは制限がついていて、表示されない場合があるようです。タレントのローラさんは表示させることができませんでした。

最後にサンプルソースを書いておきます。どうぞご参考まで。

この記事と関連してると思われる記事: