[JS]画像の形状に合わせてテキストを回り込ませるスクリプト -jQSlickWrap

通常画像にテキストを回り込ませる際は、テキストが矩形のエリアになりますが、これを円形や複雑な形状に合わせて回り込ませるスクリプトを紹介します。

jQSlickWrap
demo

円形以外にも、三角形の傾いた画像などにも対応が可能です。

スクリプトがオフの時は、矩形の回り込み

スクリプトがオンの時は、画像の形状に合わせて回り込み

スクリプトにはHTML5のcanvasが利用されており、IE6/7などの非対応ブラウザでは矩形に表示されます。
※サイトにIE7でアクセスしたところ、「Google Chrome Frame をいれろ」と表示されました。

スクリプトを使用する際にはcanvasの知識は必要なく、floatやpaddingの設定はCSSベースで行えます。

jQSlickWrapはjQueryのプラグインのため、実装にはjquery.jsが必要です。