skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

画像の側にテキストを回り込ませるJavaScript「jQSlickWrap」

｜ ｜ ｜ ｜ ｜ ｜ ｜

画像にテキストを回り込ませると、通常テキストは四角に区切られたエリア単位となります。
円や変な形状の画像のすぐ側に沿って回り込ませたい・・・そんなあなたに
jQueryプラグインのjQSlickWrapです。

使用方法
jQSlickWrapからjquery.slickwrap.jsをjQueryからjquery.jsをダウンロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.slickwrap.js"></script>
<script type="text/javascript">
$(function(){
$('.class名').slickWrap();
});
</script>

上記を記述したら画像とテキストを以下のようにします。
<img class="class名" src="image.png" />
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

最後にCSSで画像を好きな方に寄せてください。
<style>
.class名{
float:left;
padding:10px;
}
</style>

※HTML 5の【canvas】を使用しているのでIE6,7では・・・。
画像の側にテキストを回り込ませるJavaScript「jQSlickWrap」サンプル

記事作成：2009年11月25日

前の記事：画像をクロスフェードさせるJavaScript「ImageFadingSlider」
次の記事：ガラガラと要素を切り替えられるJavaScript「jQuery flips plugin」