画像とかボックスの隅っこにマーカーつけるのである。

2008年3月28日 16:29

corner.jpg
久々に自作ライブラリのご提供。まだβ版にしておいてください。
これは、画像とかボックスの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">
    <img src="hoge.jpg" width="640" height="480" />
</a>
のようにaタグに指定をします。

画像にリンクをしたくないときは、ちょっと面倒ですが、
<div rel="waku">
    <img src="hoge.jpg" width="640" height="480" />
</div>
とします。

これで、コーナーが入ります。ちなみに、サンプルでは、コーナーの色をオレンジ色にしていますが、これはあくまで目立たせるためです。
この色を変えたいときは、　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

javascript | comment(0) | trackback(0) | ▲

このブログ記事に対するトラックバックURL:

コメントする