海外プラグイン --超軽量でクールな吹き出しプラグイン「vtip」--

中級者向けの内容になるんですが、海外製のオシャレなプラグインを久々に紹介しようと思います。
今回紹介するのは超軽量の吹き出しプラグイン「vtip」です。
デモページはこちら

さっそく導入方法いってみましょう。

madtag

ダウンロード

http://www.vertigo-project.com/projects/vtip
ここからダウンロードして解凍してください。

準備してみる

サーバーにアップロードする方法と、アメーバの画像フォルダとCSSを使う方法があります。

・サーバーにアップロードする場合
中にあるvtip.jsとimagesフォルダとCSSフォルダをサーバーにアップロードします。
まず先にimagesフォルダとCSSフォルダをアップロード。
アップロード先のURLをメモしておきます


・アメーバの画像フォルダとCSSを使う場合
imagesフォルダ内にあるvtip_arrow.pngを画像フォルダにアップロードし、アップロードしたURLをメモします。
次に、CSSフォルダ内のvtip.cssをテキストエディタ(メモ帳など)で開き、中身を丸々コピーしてCSSの最後に貼りつけます。

準備してみる　その2

vtip.jsをテキストエディタ(メモ帳など)で開き、中身をメモ帳で開きちょっと書き換えます。
$('p#vtip #vtipArrow').attr("src", 'images/vtip_arrow.png');
↑ここのimages/vtip_arrow.pngの部分を、先ほどアップロードしたimagesフォルダ内にあるvtip_arrow.pngのURL、に書き換えてください。
例) $('p#vtip #vtipArrow').attr("src", 'http://example.com/vtip/images/vtip_arrow.png');
できたら上書き保存してください。

導入する

・サーバーにアップロードする場合
vtip.jsをサーバーにアップロードしてURLをメモします。
フリープラグインにスクリプトタグを書きます。
srcの部分はvtip.jsをアップロードした先のURLにします。
例) <script type="text/javascript" src="http://example.com/vtip/vtip.js"></script>
アップロードしたCSSフォルダ内のvtip.cssもインポートします。
例) <link rel="stylesheet" type="text/css" href="http://example.com/vtip/css/vtip.css" />

・アメーバの画像フォルダとCSSを使う場合
vtip.jsをテキストエディタ(メモ帳など)で開き、中身を丸々コピーします。
フリープラグインにスクリプトタグを書き、その中に先程コピーしたvtip.jsの中身を貼りつけます。
<script type="text/javascript">
ここにvtip.jsの中身を貼り付ける
</script>

適用する

吹き出しを適用したい要素にvtipクラスを付け、title属性の中に吹き出し内に表示させたい文字列を記述します。
例) <img src="test.jpg" class="vtip" title="吹き出しテスト">
↑この例だと、画像にマウスが乗ると「吹き出しテスト」という吹き出しが出現します。

非常に軽量なので、邪魔にならずにいい感じです！
作者さんに感謝！！