DynamicHTML




[ test-05 ]
触ると文字が拡大縮小します。


マウスポインタが触る(onMouseOver)と文字が大きくなったり小さくなったりします。大きさを変えた文字をレイヤーに書き出しています。文字の代わりに画像でも出来ます。


Sample













Source


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

//--表示する文字
var dt05_0Msg="小さくなる--<B> Dynamic HTML </B>"
var dt05_1Msg="大きくなる--<B> Dynamic HTML </B>"


//--レイヤーのHTMLを変数lay_dt05に一時セットする
var 
 lay_dt05 ='<LAYER NAME="dt05_0" '
 lay_dt05+='    TOP=150'
 lay_dt05+='    LEFT=140'
 lay_dt05+='    onMouseOver="strBgSm(this.name,dt05_0Msg,\'#ffffff\',\'#000000\',\'1\')"'
 lay_dt05+='    onMouseOut="strBgSm(this.name,dt05_0Msg,\'#ffffff\',\'#000000\',\'3\')"'
 lay_dt05+='>'
 lay_dt05+=dt05_0Msg
 lay_dt05+='</LAYER>'
 lay_dt05+='<LAYER NAME="dt05_1" '
 lay_dt05+='    TOP=200'
 lay_dt05+='    LEFT=140'
 lay_dt05+='    onMouseOver="strBgSm(this.name,dt05_1Msg,\'#ffffff\',\'#000000\',\'5\')"'
 lay_dt05+='    onMouseOut="strBgSm(this.name,dt05_1Msg,\'#ffffff\',\'#000000\',\'3\')"'
 lay_dt05+='>'
 lay_dt05+=dt05_1Msg
 lay_dt05+='</LAYER>'

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

//--文字の書き換え処理
function strBgSm(layName,layMsg,bgcl,fgcl,size){
    with(document.layers[layName].document){
            open()
            bgColor = bgcl
            fgColor = fgcl
            write(layMsg.fontsize(size))//--ここでサイズを指定した文字を書き出しています。
            close()
   }
}

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





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