|
 |
|
画像のフェードイン・フェードアウト
 |
IE 4.0↑ |
 |
未対応 |
| オススメ度： |
 |
|
設置難易度： |
|
サンプルと機能
→ Sample 1：ボタンを押すと画像をフェードイン・フェードアウトさせる
→ Sample 2：画像を順番にフェードインさせる
フィルタを使って画像をフェードイン・フェードアウトさせます。
Netscapeには対応していません。
サンプルスクリプト
緑の文字が変更箇所で、赤い文字が対応するスクリプトです。
"//"以下はコメントです。削除しても影響ありません。
必要な箇所をコピー＆貼り付けして編集してください。
→ Sample 1：ボタンを押すと画像をフェードイン・フェードアウトさせる
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript">
<!--
// 画像のフェードイン・フェードアウト
spd = 50; // 変化させる間隔（ミリ秒単位）
ntc = 2; // 何%ずつ変化させるか
cnt = 0;
// フェードイン
function fdInImg(img) {
document.images[img].filters['alpha'].opacity = cnt;
cnt += ntc;
if(cnt >= 100) return;
setTimeout("fdInImg('"+img+"')",spd);
}
// フェードアウト
function fdOutImg(img) {
document.images[img].filters['alpha'].opacity = cnt;
cnt -= ntc;
if(cnt <= 0) return;
setTimeout("fdOutImg('"+img+"')",spd);
}
//-->
</SCRIPT>
</HEAD>
<BODY bgcolor="#ffffff">
画像がフェードイン・フェードアウトします。<BR><BR>
<IMG src="../img/img3.jpg" name="ia" border="0" style="filter:alpha(opacity=0);">
<BR><BR>
<INPUT type="button" value="フェードイン" onClick="fdInImg('ia')">
<INPUT type="button" value="フェードアウト" onClick="fdOutImg('ia')">
<BR><BR>
</BODY>
</HTML> |
→ Sample 2：画像を順番にフェードインさせる
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript">
<!--
// 画像のフェードイン・フェードアウト
spd = 50; // 変化させる間隔（ミリ秒単位）
ntc = 2; // 何%ずつ変化させるか
// フェードインさせる画像のname属性（順番に並べる）
fii = new Array("ia","ib","ic");
cnt = 0;
i = 0;
// フェードイン
function fdInImg() {
document.images[fii[i]].filters['alpha'].opacity = cnt;
cnt += ntc;
if(cnt >= 100) {
cnt = 0;
i++;
}
if(fii.length <= i) return;
setTimeout("fdInImg()",spd);
}
//-->
</SCRIPT>
</HEAD>
<BODY bgcolor="#ffffff" onLoad="fdInImg()">
画像が順番にフェードインします。<BR><BR>
<IMG src="../img/img1.jpg" name="ia" border="0" style="filter:alpha(opacity=0);">
<IMG src="../img/img2.jpg" name="ib" border="0" style="filter:alpha(opacity=0);">
<IMG src="../img/img3.jpg" name="ic" border="0" style="filter:alpha(opacity=0);">
<BR><BR>
</BODY>
</HTML> |
解説・注意点など
onClick="fdInImg('ia')"、onClick="fdOutImg('ia')"
の「ia」は<IMG>タグで指定したname属性です。
<IMG>タグの
style="filter:alpha(opacity=0);"
で、あらかじめ画像を透明にしています。
← JavaScriptに戻る
|
|
|
