IE5.0以降のみ(Macintosh版IE5.0では正しく表示されない場合があります)
半透明フィルタを使うと、オブジェクトの不透明度を自由に変更することができます。ここでは、半透明フィルタを使って画像をフェードインする方法を考えてみましょう。
半透明フィルタを使って、画像の不透明度が「0」の画像(完全に透けている画像)を配置します。
<IMG SRC="../../assets/images/gazou050.jpg" width="396" height="580" ID=img1 STYLE="filter:Alpha(Opacity=0)">
ページの読み込みが完了した時に、「onLoad」イベントを使って画像を呼び出すための関数「imgZoom()」を呼び出します。
<BODY onLoad="fadein()";>
半透明フィルタの不透明度を「0」jから徐々に上げて、画像をフェードイン表示させる関数を記述します。
<SCRIPT LANGUAGE="JavaScript">
<!--
var density=0;
function fadein(){
if ( density <=20 ) {
document.all.img1.filters(0).Opacity=density*5;
density++;
setTimeout("fadein()",50);}
}
//-->
</SCRIPT>例のスクリプトでは、半透明フィルタの「Opacity」(不透明度)の値を「0」から「100」まで徐々に上げることで、フェードイン効果を設定しています。「Opacity」の値が「100」になると画像がはっきり表示されるようになります。
例とは逆に、半透明フィルタを使って画像の「Opacity」(不透明度)の値を「100」から「0」まで徐々に下げていくことで、画像をフェードアウトさせることができます。画像をフェードアウトするには、例のスクリプトを下のように書き換えます。
変更箇所 フェードインの場合 フェードアウトの場合透明フィルタの設定 STYLE="filter:Alpha(Opacity=0)" STYLE="filter:Alpha(Opacity=1)" 変数の定義 var density=0; var density=20 繰り返し回数の判定 if (density<=20)[ if (density>=0)[ 繰り返し回数の計算 density++; density--;