昨日の「curl.js」 設置説明 javascript」に続いて、今日も画像装飾系スクリプトの「edge.js」をご紹介。
どのようなものかと言うと、画像の周りに色々なマスクをかけられます。 詳しくはサンプルを見てね～ （＾∀＾）
設定方法
こちらからダウンロード解凍後にできた「edge」フォルダを、ご自分のスクリプト置き場に転送してください。（ここでは /wp-content/js/edge/ に置いたものとして説明します。）
次に「mask」画像のファイルの設置場所と、「JavaScript」 を、外部リンクとして読み込ませるために<head>〜</head>の間に書き込みます。 自分の場合は、テーマエディタでヘッダーの問題無さそうな部分に書き込みました。
<script type="text/javascript">
var mask2load = new Array();
mask2load[0] = "http://example.com/wp-content/js/edge/masks/8bit/crippleedge.png";
mask2load[1] = "http://example.com/wp-content/js/edge/masks/8bit/frizzedge.png";
mask2load[2] = "http://example.com/wp-content/js/edge/masks/8bit/softedge.png";
mask2load[3] = "http://example.com/wp-content/js/edge/masks/2bit/crippleedge.gif";
mask2load[4] = "http://example.com/wp-content/js/edge/masks/2bit/frizzedge.gif";
mask2load[5] = "http://example.com/wp-content/js/edge/masks/2bit/softedge.gif";
</script>
<script type="text/javascript" src="http://example.com/wp-content/js/edge/edge.js"></script>
黄文字の部分にファイルの設置場所（アドレス）を指定var mask2load = new Array();
mask2load[0] = "http://example.com/wp-content/js/edge/masks/8bit/crippleedge.png";
mask2load[1] = "http://example.com/wp-content/js/edge/masks/8bit/frizzedge.png";
mask2load[2] = "http://example.com/wp-content/js/edge/masks/8bit/softedge.png";
mask2load[3] = "http://example.com/wp-content/js/edge/masks/2bit/crippleedge.gif";
mask2load[4] = "http://example.com/wp-content/js/edge/masks/2bit/frizzedge.gif";
mask2load[5] = "http://example.com/wp-content/js/edge/masks/2bit/softedge.gif";
</script>
<script type="text/javascript" src="http://example.com/wp-content/js/edge/edge.js"></script>
使用方法
記述方法はいたって簡単！！<img src="画像アドレス" alt="" class="edges" />
上記のように普通に<img>タグで記述して、ポイントとなる「class="edges"」を付けるだけです。 （＾∀＾）※「edge」ではなく「edges」なので注意！！
オプション
上記の「 class="edges" 」部分に、マスクの種類を指定することにより表示方法の変更が出来ます。詳しくはサンプルページに書いておきましたので見比べてください・・・（（ ( (ヽ(；^^)/逃げろ～・・・・・・(o_ _)oドテッ!
サンプル
残念なことに自分の環境ではこのページ上でお見せできないのでこちらになります。以上、終了です。
人気度 : 12 %
(1 投票, 平均値/最大値: 5 / 5)
最上階
1階
関係のある記事
No user の書き込みがあります
コメントほしぃ～よぉ～ σ(^◇^;)