DynamicHTML




[ test-08 ]
画像のフェイドイン。


ページの読み込みが完了したらTouch me !のメッセージがでて、触ると画像がフェイドインします。変数の設定によって黒地からのフェイドインもできます。


Sample













Source

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--

//--画像のファイル名を指定してください
fiImg_Name="BOTAN.GIF"

//--画像のサイズを指定してください
fiImg_Width=100 //幅
fiImg_Height=70 //高さ

//--画像の表示位置をページ左上からのピクセル数で指定してください
fiImg_X=180 //左(LEFT)から
fiImg_Y=150 //上(TOP)から

//--フェイドインタイプを指定してください
var fiType="WTOB"//--"WTOB"なら白地に画像が、"BTOW"は黒地に画像が現われます
if(fiType=="WTOB"){bgcl0="#ffffff";txtcl0="#000000"}//--bgcl0=は背景色,txtcl0=は文字色を指定しています
if(fiType=="BTOW"){bgcl0="#000000";txtcl0="#ffffff"}

//--フェイドイン用レイヤー構築
with(document){
        write('<LAYER NAME="fiLayer0"')
        //write('    BACKGROUND="BARON0.GIF"')
        write('    LEFT='+fiImg_X+'')
        write('    TOP='+fiImg_Y+'')
        write('    CLIP='+fiImg_Width+','+fiImg_Height+'')
        write('    VISIBILITY="hide"')
        write('>')
        write('<IMG SRC='+fiImg_Name+'')
        write(' WIDTH="'+fiImg_Width+'"')
        write(' HEIGHT="+fiImg_Height+">')
        write('</LAYER>')

for(fiLay=0;fiLay<=5;fiLay++){
        var bkgd=""+fiType+fiLay+".GIF"
        write('<LAYER NAME="noi'+fiLay+'"')
        write('    BACKGROUND='+bkgd)
        write('    LEFT='+fiImg_X+'')
        write('    TOP='+fiImg_Y+'')
        write('    CLIP='+fiImg_Width+','+fiImg_Height+'')
            if(fiLay==5){
                    write('    onMouseOver="if(ldFlg)sho()"')
                    write('>')
                    write('<I>Now loading.......</I>')//--これを書かなければメッセージは出ません
                }else{
                    write('>')
                }
        write('</LAYER>')
        }
    }

//--Touch me !を表示
function ld(){
        var fiMsg=document.layers["noi5"].document
            fiMsg.write('<I>Touch me !</I>')//--これを書かなければメッセージは出ません
            fiMsg.close()
            ldFlg=true
    } 

//--フェイドイン
var fi=0
var fiID=setTimeout("",1)
var fiSpd=10  //フェイドインスピード(数値が小さいほど早い)
function sho(){
  document.layers["noi5"].visibility="hide"
  document.layers["fiLayer0"].visibility="show"
    if(fi<=5){
            document.layers["noi"+fi].visibility="hide"
            fi++
            clearTimeout(fiID)
            fiID=setTimeout("sho()",fiSpd)
      }else{
            clearTimeout(fiID)
      }
}


<!---->
</SCRIPT>
<BODY   BGCOLOR="&{bgcl0};" 
        TEXT="&{txtcl0};"
        onLoad="ld()"
>
</BODY>
</HTML>




//--sourceの中のこの色は注目ポイントです。
//--この色の部分を自由に書き換えて使ってください