SQLの窓 イラストAC フリー素材

2015年07月17日

jQuery プラグイン jquery.balloon.js を使用する『画像バルーン』の処理 (Excel で作成した吹き出し)

2014年01月17日 時点の jquery.balloon.js では、jQuery 1.7.2 以降で css に null を設定して動作しませんでしたが、2ケ月後に 0.5.1 として更新されて正しく動いています( css に null が設定できる )

css に null を設定してしまうので、文字列のセンタリングは classname に設定する クラスで設定する事になります。 



オリジナルページで既に、画像を使ったバルーンが動作しません(jQuery 1.7.2 以降)。css に null をセットできなくなっているので必要な値をセットします。
▼ カーソルを上に置いて下さい
jQuery のキー位置をかな入力すると
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></"+"script>");
}
</script>
<script>
if ( !window.jQuery.balloon ) {
	document.write("<"+"script src=\"http://winofsql.jp/js/jquery.balloon.min.051.js\"></"+"script>");
}
</script>
<style type="text/css">
.orange_balloon {
	background: url(http://winofsql.jp/js/balloon/orange_balloon.png) center center no-repeat;
	width: 323px;
	height: 278px;
	line-height:290px;
	font-size: 45px;
	font-weight: bold;
	text-align: center;
}
</style>
<script type="text/javascript">
$(function() {
	$('#matanaisun').balloon(
		{
			position: "right",
			tipSize: 20,
			css: {
				opacity: "1",
				color: "#000",
				fontSize: "80px",
				borderRadius: "30px",
				border: "solid 5px #222",
			}
		}
	);
	$('#matanaisun2').balloon(
		{
			tipSize: 0,
			offsetY: -290,
			offsetX: 100,
			classname: "orange_balloon",
			css: null
		}
	);
});
</script>
<pre>
<span id="matanaisun" title="またないすん">
jQuery のキー位置をかな入力すると
</span>
■ <a id="matanaisun2" title="こんな感じ" href="http://urin.github.io/jquery.balloon.js/" target="_blank">画像を使った自由なふきだし(Excelで簡単)作って、背景画像に指定しました</a>
</pre>

▼ 文字にマウスカーソルを合わせるとこうなります
jquery.balloon.js を使っています

▼ カーソルを上に置いて下さい( 画像が表示されます )画像を使った自由なふきだし(Excelで簡単)作って、背景画像に指定しました










関連する記事



【jQueryの最新記事】
posted by at 2015-07-17 18:18 | jQuery | このブログの読者になる | 更新情報をチェックする


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX