久々に自作ライブラリのご提供。まだβ版にしておいてください。
これは、画像とかボックスの4隅にちらりと装飾をするというもの。
さてチュートリアルでございますが、
まずjsをインポートします。
<script type="text/javascript" language="javascript" src="js/waku.js"></script>
このwaku.jsを使っていくわけですが、枠を付けたいものにたいして、
rel="waku"を指定します。
今反応しているのは、aタグとdivタグに反応するようになっているので、
画像にリンクをおきたいときは、
<a class="sample1" href="hogehoge.com" rel="waku">のようにaタグに指定をします。
<img src="hoge.jpg" width="640" height="480" />
</a>
画像にリンクをしたくないときは、ちょっと面倒ですが、
<div rel="waku">
<img src="hoge.jpg" width="640" height="480" />
</div>
とします。
これで、コーナーが入ります。ちなみに、サンプルでは、コーナーの色をオレンジ色にしていますが、これはあくまで目立たせるためです。
この色を変えたいときは、 waku.jsの7行目
また、コーナーのサイズは、rel="waku"を指定する際に、
もちろん
現状小数点などには対応してません。整数値をwakuのあとにスペースなどをつけずに記載してください。
これで出来る・・はず。
ちなみにサンプルはこちら
http://sevenstyleweb.com/sample/4cnr/
jsのダウンロードはこちら。
http://sevenstyleweb.com/download/waku.zip
これで、コーナーが入ります。ちなみに、サンプルでは、コーナーの色をオレンジ色にしていますが、これはあくまで目立たせるためです。
この色を変えたいときは、 waku.jsの7行目
var color ="#f73";のカラー部分を書き換えると反応します。
また、コーナーのサイズは、rel="waku"を指定する際に、
rel="waku10"とすれば、10pxのラインでかかれます。
もちろん
rel="3"とすれば3pxのラインでかかれます。デフォルトは3pxにしています。（1pxでも反応します)
現状小数点などには対応してません。整数値をwakuのあとにスペースなどをつけずに記載してください。
これで出来る・・はず。
ちなみにサンプルはこちら
http://sevenstyleweb.com/sample/4cnr/
jsのダウンロードはこちら。
http://sevenstyleweb.com/download/waku.zip
コメントする