DynamicHTML




[ test-04 ]
触ると文字の背景色がフラッシュする。


レイヤータグにonMouseOverとonMouseOutを記述しておいて、マウスポインタが触ったり(onMouseOver)離れたり(onMouseOut)したときに指定した色を付けてレイヤー内の背景色を再描画しています。この再描画を何度も色を変えて繰り返すことでフラッシュ風に見せます。


Sample













Source


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

//--表示する文字
var dt02_0Msg="<B> Dynamic HTML </B>"//--たとえばこれを<A HREF="...で囲めば普通のリンクとして使えます。
var dt02_1Msg="<B> Dynamic HTML </B>"
var dt02_2Msg="<B> Dynamic HTML </B>"

//--レイヤーのHTMLを変数lay_dt02に一時セットする
var 
 lay_dt02 ='<LAYER NAME="dt02_0" '
 lay_dt02+='    TOP=150'
 lay_dt02+='    LEFT=160'
 lay_dt02+='    onMouseOver="strClrCh(this.name,dt02_1Msg)"'
 lay_dt02+='    onMouseOut="strClrCh(this.name,dt02_1Msg)"'
 lay_dt02+='>'
 lay_dt02+=dt02_0Msg
 lay_dt02+='</LAYER>'
 lay_dt02+='<LAYER NAME="dt02_1" '
 lay_dt02+='    TOP=180'
 lay_dt02+='    LEFT=160'
 lay_dt02+='    onMouseOver="strClrCh(this.name,dt02_1Msg)"'
 lay_dt02+='    onMouseOut="strClrCh(this.name,dt02_1Msg)"'
 lay_dt02+='>'
 lay_dt02+=dt02_1Msg
 lay_dt02+='</LAYER>'
 lay_dt02+='<LAYER NAME="dt02_2" '
 lay_dt02+='    TOP=210'
 lay_dt02+='    LEFT=160'
 lay_dt02+='   onMouseOver="strClrCh(this.name,dt02_2Msg)"'
 lay_dt02+='   onMouseOut="strClrCh(this.name,dt02_2Msg)"'
 lay_dt02+='>'
 lay_dt02+=dt02_2Msg
 lay_dt02+='</LAYER>'

//--レイヤーの書きだし
document.write(lay_dt02)

var strBgClrCh=new Array()
strBgClrCh[0] = "red"
strBgClrCh[1] = "#333333"
strBgClrCh[2] = "yellow"
strBgClrCh[3] = "magenta"
strBgClrCh[4] = "#ffffff"


//--文字の書き換え処理
function strClrCh(layName,layMsg){
    with(document.layers[layName].document){
        for(clrchi=0;clrchi<strBgClrCh.length;clrchi++){
            open()
            bgColor = strBgClrCh[clrchi]
            fgColor = "black"
            write(layMsg)
            close()
        }
   }
}

<!---->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#ffffff" TEXT="#000000">
</BODY>
</HTML>





//--sourceの中のこの色は注目ポイントです。
//--この色の部分を自由に書き換えて使ってみましょう(^^)/
//--もっと大きなレイヤーを指定すれば背景色のフラッシュももっと派手になります(^^;;