| ポイント |
<![CDATA[
function fadein()
{
if (n > 100) return;
n += 10;
myIMG.filters['alpha'].opacity = n;
setTimeout("fadein()",200);
}
function fadeout()
{
if (n < 0) return;
n -= 10;
myIMG.filters['alpha'].opacity = n;
setTimeout("fadeout()",200);
}
]]>
|
| 説 明 |
フェードイン／フェードアウトさせるにはスタイルシートで透明度を指定しておきます。スタイルの透明度を変化させ完全に表示される（または表示されなくなる）までsetTimeout()を使い定期的にフェードイン／フェードアウト処理の関数を呼び出します。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>画像をフェードイン／フェードアウトさせる</title>
<script language="JavaScript"><!--
n = 0;
function fadein()
{
if (n > 100) return;
n += 10;
myIMG.filters['alpha'].opacity = n;
setTimeout("fadein()",200);
}
function fadeout()
{
if (n < 0) return;
n -= 10;
myIMG.filters['alpha'].opacity = n;
setTimeout("fadeout()",200);
}
// --></script>
</head>
<body>
<img src="sample.gif" id="myIMG" style="position:absolute;top:0px;left:0px;filter:alpha(opacity=0);">
<br>
<a href="javaScript:fadein()">フェードイン</a><br>
<a href="javaScript:fadeout()">フェードアウト</a><br>
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
画像をフェードイン／フェードアウトさせる