| ポイント |
<![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);
}
<img src="white.gif" id="myIMG" width="120%" height="120%" style="position:absolute;top:0px;left:0px;z-index:1;filter:alpha(opacity=100);">
]]>
|
| 説 明 |
背景画像をフェードイン／フェードアウトしているようにみせるにはimgタグを使って背景画像の上にマットとして敷いておきます。サンプルでは白い画像をブラウザの画面いっぱいに広げて背景画像を隠しています。この白い画像にスタイルシートで透明度を指定しておきます。スタイルの透明度を変化させ完全に表示される（または表示されなくなる）までsetTimeout()を使い定期的にフェードイン／フェードアウト処理の関数を呼び出します。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>背景画像がフェードイン／フェードアウトしているように見せる</title>
<script language="JavaScript"><!--
n = 100;
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 background="sample.gif">
<img src="white.gif" id="myIMG" width="120%" height="120%" style="position:absolute;top:0px;left:0px;z-index:1;filter:alpha(opacity=100);">
<br>
<div style="position:absolute;top:100px;left:0px;z-index:2">
<a href="javaScript:fadein()">背景をフェードアウト</a><br>
<a href="javaScript:fadeout()">背景をフェードイン</a><br>
</div>
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
背景画像がフェードイン／フェードアウトしているように見せる