【jQuery】吹き出しホバー用プラグイン「jquery.balloon.js」

シェアする

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

学校の卒業制作で作ったサイトのお直しをしました。

(サイトはこちら。)

jQueryを少し使用しているんですが、新しく追加したもの、以前使用したのに「これどうやるんだったっけ…」とすっかり忘れているものがあるので、これから備忘のためにちょくちょくメモしていこうかな、と。

まずは新しく追加したもの。

こちらの記事をにある、「jquery.balloon.js」を追加しました。

 設置が超簡単でカスタマイズ性の高い吹き出しホバー用jQueryプラグインjquery.balloon.js

画像を用意することなくホバー時に吹き出しが出るようになるよ~わぁ便利!というプラグインです。

■使い方

  1. jQuery本家のサイトからjQueryをダウンロードしてHTMLに読み込ませる
  2. プラグインをこちらからダウンロードして、同じくHTMLに読み込ませる
  3. scriptタグの中に吹き出しに対する指定を書く

これだけです。とっても簡単!

■吹き出しの内容の指定

吹き出しの内容は、オプションの「contents」、またはtitle/alt属性で指定するようです。
私は各リンクのtitle属性を吹き出しで出したかったので、後者の方法で指定しました。

※ちなみに、title/altそれぞれに別のテキストを入れていたのですが、吹き出しにはtitleの内容が表示されました。両方入れてあるときは、title属性の内容が優先されるのかもしれません。

■デザインも簡単に変えられる!

CSSの指定もできるので、デザインもいじることができます。
(指定の仕方はデモページこちらの記事に記載があります。)

fukidashi1_03

デフォルトの設定のままだと上の画像のようになります。これでも可愛いんですが、ちょっとサイトの雰囲気と合わなかったので…。

fukidashi2_03

まず、吹き出しの背景色を白に。吹き出しは元々少し透過しているので、背景の茶色が透けてベージュっぽくなりました。

そして影の色が濃すぎたので、他の画像の影の色と同じ茶系の色にして、ボーダーもなくしました。

ちなみに吹き出しはアニメーションでしゅるっと出て来るのですが、そのスピードも指定できます。
このプラグイン、すごく便利です!

シェアする

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

フォローする