Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 riference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial

 画像をフェードイン表示する

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--;

<<<戻る

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box