N-takデザインブログ

WEBで培った作品や技術を公開しています。

吹き出しでコメントがでるよ。jQuery初心者まとめ!

お手軽に画像にカーソルがのったらコメントがでるjacascriptを公開します。

 

 

リッチ感が少しだけあがります。

なお、参考にしたサイトはこちら

jquery.balloon.jsのデモ

jQuery

 

以下のファイルをそれぞれダウンロードして<head>内に設置

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script src="../js/balloon.js"></script>

 

さらにその下に

<script type="text/javascript">

$(function() {

  $('selectors').balloon(options);

});

</script>

 を記述。

 

あとは、好きな画像にtitleタグとコメントを埋め込むだけです。

<img src="リンク先のアドレス"  title="入れたいコメント">

 

では、ページを見てみましょう。

画像にカーソルを合わせるとコメントの吹き出しがでますね。

 

   N-tak.comの作品集

 

補足

吹き出しのデザインを変えたい場合は、balloon.js を開いてください。

一番下まで移動すると下記記述がありますので、css{ }の中を変えてしまえば

お好きなデザインに変更可能です。

 $.balloon = {

    defaults: {

      contents: null, url: null, ajaxComplete: null, classname: null,

      position: "top", offsetX: 0, offsetY: 0, tipSize: 12,

      delay: 0, minLifetime: 200,

      showDuration: 100, showAnimation: null,

      hideDuration:  80, hideAnimation: function(d) { this.fadeOut(d); },

      css: {

        minWidth       : "20px",

        padding        : "5px",

        borderRadius   : "6px",

        border         : "solid 1px #777",

        boxShadow      : "4px 4px 4px #555",

        color          : "#666",

        backgroundColor: "#efefef",

        opacity        : ($.support.opacity) ? "0.85" : null,

        zIndex         : "32767",

        textAlign      : "left"

 

以上です。

これで、自サイトの隠しコマンド的なリッチ感をあげて下さい。