[jQSlickWrapライブラリ] 文字を画像にまわりこませる
説明
jQSlickWrapライブラリで文字を画像にまわりこませるには、あらかじめPNG形式で回り込ませる画像を用意します。また、この画像とHTML、JavaScriptファイルは同一ドメインにアップロードしておく必要があります。$()で回り込ませたいimgタグを指定しslickWrap()メソッドを呼び出します。imgタグには回り込みを行うCSSのfloatプロパティも指定しておきます。
このライブラリはcanvasの機能を利用しているためIE6〜8では動作しません。
サンプルプログラム
【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.slickwrap.js"></script>
<script type="text/javascript" src="js/sample.js"></script>
</head>
<body>
<h1>PNG画像にテキスト回り込み</h1>
<div class="container">
<img src="images/logo.png" class="wrapReady">
<p>
jQueryのSlickWrapライブラリを使えば、PNG画像の透明部分に文字が回り込む効果を施すことができます。PNG画像だけしか対応していないためJPEG画像やGIF画像を使って文字を回り込ませることはできません。<br>
Firefoxではローカル上ではセキュリティエラーにより画像が配置できないため、サーバー上（同一ドメイン）に画像とHTMLファイルを転送してからチェックするとよいでしょう。
</p>
</div>
</body>
</html>
【sample.js】
$(function(){
$(".wrapReady").slickWrap();
});