ぼんやりなるエフェクトcovers.js~javascript

ついにオイラもjavascriptのライブラリを一個作っちゃった。なので、ちょっ...

ついにオイラもjavascriptのライブラリを一個作っちゃった。なので、ちょっとこちらに紹介。
ダウンロードしてもらってかまいませんが、その際は、コメント入れてもらえるとうれすぃっす。

covers.js

初期状態で若干の暗さを画像に持たせておいて、マウスオーバーのときに明るくなるというエフェクト。

使い方
prototypeとscriptaculousのeffect.jsが必要になります。

上記各ライブラリとcovers.jsをダウンロードしたあと、ヘッダに以下コード入力

<script language="javascript" type="text/javascript" src="js/prototype.js"></script>
<script language="javascript" type="text/javascript" src="js/effects.js"></script>
<script language="javascript" type="text/javascript" src="js/covers.js"></script>
画像を次のようにdivタグでくくる。このとき、親にあたるdivタグにはidの指定が必要。
<div id="hoge" class="crap">
    <img src="hogehoge" width="100" height="100" rel="covers">
</div>
またimgタグの属性として、rel="covers"と指定。

以上。

サンプル画面

使用感などもらえたらうれしいっす。

この記事の周辺情報

著者

稲本[せぶん]浩介
福岡の企業に在籍し、Webを中心に活動中。Webディレクター、IA(インフォメーション アーキテクト)、マークアップエンジニア、CSSコーダーetc。
Twitterボタン

amazonさんがこのサイトを見て、書籍を紹介してくれています。