画像をフェードインする

とほほのWWW入門 > アラカルト > 画像をフェードインする
2000年1月9日更新

■説明

Clickボタンを押した時に、画像をフェードインさせます。<BODY onLoad="...">で呼び出せば、ページを開いた時にフェードインさせることも可能です。Internet Explorer 4.0以降で利用できます。

■サンプル

■ソースコード

<SCRIPT LANGUAGE="JavaScript">
<!--
function fadein(id) {
  app = navigator.appName.charAt(0);
  ver = navigator.appVersion.charAt(0);
  if ((app == "M") && (ver >= 4)) {
    document.all.item(id).style.visibility = "hidden";
    document.all.item(id).filters[0].apply();
    document.all.item(id).style.visibility = "visible";
    document.all.item(id).filters[0].play();
  }
}
// -->
</SCRIPT>
<IMG SRC="image/kodomo4.gif" ID=img1
     STYLE="filter:revealTrans(duration=3.0,Transition=12);
            visibility=hidden;">
<BUTTON onClick="fadein('img1')">Click!!</BUTTON>

動作確認

IE4.0/5.0(Win)で動作確認しています。また、IE2.0(Win)、NN2.0/3.0/4.0(Win)でエラーが発生しないことを確認しています。IE4.0(Mac)ではうまく動作しないという報告をいただいています。

Copyright (C) 1998-2000 とほほ
http://wakusei.cplaza.ne.jp/twn/wwwxx024.htm