HOME の中の
レポート の中の
jQuery の中の
[jQuery]透過PNGに対応したクロスフェードボタン – smoothRollOver.jsロールオーバーすると滑らかに画像が切り替わるライブラリ

レポート

[jQuery]透過PNGに対応したクロスフェードボタン – smoothRollOver.jsロールオーバーすると滑らかに画像が切り替わるライブラリ

Jul. 1, 2010

このエントリをはてなブックマークに追加
透過PNGに対応したクロスフェードボタン

ロールオーバーすると滑らかに画像が切り替わるライブラリ

ボタン・リンクのロールオーバー効果を表現する際、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」の2つのライブラリを読み込む必要があります。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ライセンスの定義に基づきご利用される場合は、非商用、商用問わず無償でご利用できます。

ダウンロード


日本電子工藝社の特徴を知る。
日本電子工藝社とは?
お知らせを見る。
日本電子工藝社からのニュース・イベントを配信しています。
利用規約
www.jeia.co.jpのサイトにおけるご利用規約をご説明しています。
BLOGを見る。
Twitterと連動した「つぶやき型ブログ」を配信していいます。