DynamicHTML




[ test-02 ]
文字に触ると文字の色が変る。


レイヤータグにonMouseOverとonMouseOutを記述しておいて、マウスポインタが触ったり(onMouseOver)離れたり(onMouseOut)したときに指定した色を付けてレイヤー内の文字を再描画しています。


Sample













Source


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

//--表示する文字
var dt02_0Msg="<B> Dynamic HTML </B>"
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,\'red\')"'
 lay_dt02+='    onMouseOut="strClrCh(this.name,dt02_1Msg,\'black\')"'
 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,\'magenta\')"'
 lay_dt02+='    onMouseOut="strClrCh(this.name,dt02_1Msg,\'black\')"'
 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,\'orange\')"'
 lay_dt02+='   onMouseOut="strClrCh(this.name,dt02_2Msg,\'black\')"'
 lay_dt02+='>'
 lay_dt02+=dt02_2Msg
 lay_dt02+='</LAYER>'

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

//--文字の書き換え処理
function strClrCh(layName,layMsg,color){
    var msgLay = document.layers[layName].document
      msgLay.open()
      msgLay.fgColor = color
      msgLay.write(layMsg)
      msgLay.close()
}

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





//--sourceの中のこの色は注目ポイントです。
//--この色の部分を自由に書き換えて使ってみましょう(^^)/