jQueryで動きのある吹き出しを設置してみた

先日「CSSだけでおしゃれな吹き出しを設置してみる」ということで紹介しましたが、今度はjQueryを利用した動きのある吹き出しを紹介します。
ソースは上記サイトにありますのでどうぞ。実際どのようになるかは下でお試しください。
この上にマウスを乗せると...


まず外部ファイルでjavascriptとCSSを読み込んで短いjavascriptを記述します。赤字のspeedで吹き出しが降りてくるスピード、delayで降り始めまでの時間を変えられます。
<link href="theme/style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.betterTooltip.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.tTip').betterTooltip({speed: 150, delay: 300});
});
</script>
後は非常にシンプルです。divタグのtittleに吹き出しの中身を記述します。
<div class="tTip" id="cloud1" title="このように吹き出しが出ます">
この上にマウスを乗せると...
</div>
また、リンクを指定することもできます。方法はそのまま下記のとおりです。
<div class="tTip" id="cloud1" title="このように上から吹き出しが降ってきます">
<a href="リンク先のURL" ">
この上にマウスを乗せると...
</a>
</div>
サンプルのCSSはたくさん書いていますがこれくらいでいいと思います。
.tTip {
	width: 200px;
	position: absolute;
	cursor: pointer;
	color: #666;
	font-weight: bold;
}
.tip {
	color: #333;
}
.tip {
	width: 212px;
	padding-top: 37px;
	overflow: hidden;
	display: none;
	position: absolute;
	z-index: 500;
	background: transparent url(theme/images/tipTop.png) no-repeat top;
}
	
.tipMid {
	background: transparent url(theme/images/tipMid.png) repeat-y;
	padding: 0 25px 20px 25px;
}
.tipBtm {
	background: transparent url(theme/images/tipBtm.png) no-repeat bottom; 
	height: 32px;
}
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
このコメントは管理人のみ閲覧できます
【2010/01/28 12:53】 | - # | [edit]
IE系ブラウザだと、画像が表示されるまでの間黒いフチが出てますが、、
コレは仕様?
【2011/01/17 15:43】 | noname #- | [edit]
確かに黒くなりますね。
参照元も同じように黒くなるので仕方ないのかも。
【2011/01/20 23:42】 | 管理人 #E2ywrYdA | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

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