2008年07月27日

ページを開いたときに画像がフェードインします。IE6,Mozilla Firefox

スポンサード リンク

<BODY onload=" ***()">を書かずに IMG タグの中に onload=" ***()"を入れました。
なのでブログにも簡単に設置できます。


サンプルソース

<HTML>
<HEAD>
<TITLE>ページを開いたときに画像がフェードインします。IE6,Mozilla Firefox</TITLE>
</HEAD>
<BODY>
<script type="text/javascript">
<!--
opa=0; //透明度 0は透明
opacnt=2; //透明度の増減の間隔
timer=100; //setTimeout関数の実行間隔 ミリ秒

// フェードイン
function FadeInstr() {
gazouId = "gazou1";
MyIMG = document.getElementById(gazouId);
MyIMG.style.visibility = "visible";
FadeIn1(gazouId,opa);
}
//透明度を増加していきます。
function FadeIn1(gazouId,opa) {
if (opa <= 100) {
MyIMG.style.filter = "alpha(opacity:"+opa+")"; // IE のソース
MyIMG.style.opacity = opa/100; //Mozilla Firefoxのソース
opa += opacnt;
setTimeout("FadeIn1('"+gazouId+"',"+opa+")", timer);
}
}

//-->
</SCRIPT>
<IMG src="画像のURL" id="gazou1" name="gazou1" width="320" height="240" style="visibility : hidden;" onload="FadeInstr()">

</BODY>
</HTML>

 opacityの設定値
IE :開始透明度 0(透明) 〜 100(不透明)-整数値
Firefox :開始透明度 0(透明) 〜 1.0(不透明)-小数値

 この数値の違いのためMozilla Firefoxのソースopa/100 の処置をしています。
この opacity の数値を増加させることによってフェードインを行います。
赤色で書いたソースの数値は変更できます。
onload="FadeInstr()" 画像が読み込まれたときに関数を実行します。

posted by javaScript at 20:55 | 大阪 ☀ | 画像 | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。