ロールオーバーすると滑らかに画像が切り替わるライブラリ
ボタン・リンクのロールオーバー効果を表現する際、CSSやJavaScriptによる画像の切り替えだけでは物足りない時があります。ロールオーバー時のデザインを活かすため、ボタンにロールオーバーすると滑らかに画像が切り替わるライブラリを作成しました。みなさまのデザイン表現の幅を広げるお手伝いができれば幸いです。（※個人利用・商用利用を問わず自由にご利用いただけますが、自己責任の上でご使用ください。）
動作サンプル
このライブラリは、JPEG・GIF・透過PNGに対応しています。
| JPEG/GIFの場合 |  |
|---|---|
| 透過PNGの場合 |  |
InternetExplorer6～8のPNG対応について
InternetExplorerは、バージョン6までは透過PNG自体に対応しておらず、7・8になってもフェードイン表現の際に透過部分がギザギザになってしまう仕様です。弊社のサイトや案件ではデザイン上の透過表現にPNG画像をよく使用しており、透過PNGをInternetExplorerで利用するためのライブラリを検討してきました。このライブラリでは、その中で最も有効だった「DD_belatedPNG」というライブラリを併用することで、InternetExplorerでも透過PNGのクロスフェードを実現しています。
「DD_belatedPNG」の詳しい使い方は、参考元サイトをご覧下さい。
追記：InternetExplorer8は、DD_belatedPNGで利用しているVML（IE独自の描画タグ・HTML5のCanvasタグのようなもの）機能の一部が利用できないため、PNG部分が表示されません。meta タグを使ってIE7標準モードにしてください。
設置方法
HTMLページに適用する際は、このライブラリを読み込む前に、「jQuery」「DD_belatedPNG」の２つのライブラリを読み込む必要があります。DD_belatedPNGはInternetExplorerでしか利用しないため、条件付コメントアウトの中に<script>タグを記述します。
<html> <head> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <!--[if IE]> <script type="text/javascript" src="./DD_belatedPNG.js"></script> <![endif]--> <script type="text/javascript" src="./jquery.js"></script> <script type="text/javascript" src="./smoothRollOver.js"></script> </head> <body> <a href="#"><img src="./button_off.png" alt="ボタン" width="100" height="10" /></a> </body> </html>
カスタマイズ
フェードイン・フェードアウトの長さを変更したい場合は、「smoothRollOver.js」の19～20行目の下記部分の数字を編集してください。単位はミリ秒です。
var fadeInTime = 300; // msec var fadeOutTime = 300; // msec
ライセンスについて
MITライセンスの定義に基づきご利用される場合は、非商用、商用問わず無償でご利用できます。
