【おやじのweb技】 html/javascript/css等
winXP+IE6MAC+IE5
TopPage表示 /  保　存 /  印　刷 /  Window Resize /  Window Close
g007

画像をフェードイン・フェードアウト表示する
このページのトップに戻る /  Window Resize /  Window Close /  最終更新日表示

action
クリックすると画像がフェードインする
クリックすると画像がフェードアウトする

web技

■フェードインの場合

◆手順1【画像設置】
※画面上<body>〜</body>間に画像を設置する。
※画像には id設定(d="IMG_1")し、スタイル設定で画像の不透明度をstyle="filter:Alpha(Opacity=0)" に設定する。

-----次の行から(copy)-----
<img src="photo/001.JPG" id="IMG_1" style="filter:Alpha(Opacity=0)" width="400" height="227" border="0">
-----上の行まで(copy)-----

◆手順2a【スクリプト実行a】
※起動時実行<body〜>に記述

-----次の行から(copy)-----
<body onload="fadeIn()">
-----上の行まで(copy)-----

◆手順2b【スクリプト実行b】
※リンク文字をクリックすると実行

-----次の行から(copy)-----
<a href="#" onclick="fadeIn2()">クリックすると画像がフェードイン</a>
-----上の行まで(copy)-----

◆手順3【不透明度を変更してフェードインさせるスクリプト】
※フェードイン:不透明度を0から徐々に上げる

-----次の行から(copy)-----
<script type="text/javascript">
var TIMER=300;　　 //変更時間設定(1秒=1000)
var Di=0;　　　　　//フェードイン(ゼロに設定)
var STEP=5;　　　　//画像切替の変化の程度(切替回数は100÷STEP)

//画像フェードイン

function fadeIn() {
　　if (Di <= 20) {　　　　　　　　　　　　　　　　　　　　　　　　　 //繰り返し条件の設定
　　　　document.all.IMG_1.filters(0).Opacity=Di * STEP; 　//不透明度の計算
　　　　Di++;　　　　　　　　　　　　　　　　　　　　　　　　　　　　//繰り返し回数の計算
　　　　setTimeout("fadeIn()",TIMER);　　　　　　　　　　　　//指定時間毎にスクリプト実行
　　}
}

function fadeIn2() {
　　Di=0;
　　fadeIn();
}
//-->
</script>
-----上の行まで(copy)-----

■フェードアウトの場合

◆手順1【画像設置】
※画面上<body>〜</body>間に画像を設置する。
※画像には id設定(d="IMG_2")し、スタイル設定で画像の不透明度をstyle="filter:Alpha(Opacity=100)" に設定する。

-----次の行から(copy)-----
<img src="photo/002.JPG" id="IMG_2" style="filter:Alpha(Opacity=100)" width="400" height="227" border="0">
-----上の行まで(copy)-----

◆手順2a【スクリプト実行a】
※起動時実行<body〜>に記述

-----次の行から(copy)-----
<body onload="fadeOut()">
-----上の行まで(copy)-----

◆手順2b【スクリプト実行b】
※リンク文字をクリックすると実行

-----次の行から(copy)-----
<a href="#" onclick="fadeOut2()">クリックすると画像がフェードアウト</a>
-----上の行まで(copy)-----

◆手順3【不透明度を変更してフェードアウトさせるスクリプト】
※フェードアウト:不透明度を100から徐々に下げます
※(注)本例では、フェードアウトが終了したら元に戻しています(不要な場合は削除)。
-----次の行から(copy)-----
<script type="text/javascript">
var TIMER=300;
var Do=20;　　　　//フェードアウト(透明度最大値100をSTEPで除した数値---画像切替回数)
var STEP=5;　　　

//画像フェードアウト
function fadeOut() {
　　if (Do >= 0) {
　　　　document.all.IMG_2.filters(0).Opacity=Do * STEP;
　　　　Do--;
　　　　setTimeout("fadeOut()",TIMER);
　　}
　　//フェードアウトが終了したら元に戻す(注)
　　if (document.all.IMG_2.filters(0).Opacity==0) {
　　　　document.all.IMG_2.filters(0).Opacity=100;
　　}
}

function fadeOut2() {
　　Do=20;
　　fadeOut();
}
//-->
</script>
-----上の行まで(copy)-----

解説等

 ◆画像をフェードイン・フェードアウト表示します。
◆フェードイン・アウトの速度等によって定数を設定して下さい。

【類似技】
◆[技m017]画像にマウスを重ねるとフェードインして別画像に入れ替える
◆[技m015]画像やセルにマウスを重ねると画像やセル背景色の透明度が変わる
キーワード

◇filter◇Opacity◇setTimeout

history

(2004.10.04)[技m017]の情報を追加
(2004.08)設置

注意

 ◆操作MENUの[Window Resize]を選択するとウィンドウサイズが変更可能です。
◆上記の[web技]をクリップボードにコピーしテキストエディタに貼り付けて使用する場合は、表示のための改行記号や全角・半角スペースの記号等を削除して下さい。
-----次の行から(copy)-----
(この部分をクリップボードにコピーしてテキストエディタ等に貼り付けて下さい)
-----上の行まで(copy)-----