Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 riference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial

 徐々に姿を現す文字を作成する

IE5.0以降のみ(Macintosh版IE5.0では正しく表示されない場合があります)

JAVA Scriptを使って、「alpha」フィルタの「opacity」(不透明度)の数値を変化させると、透明度が徐々に変わっていくように表現することができます。ここでは、「alpha」フィルタの不透明度を徐々に上げていくことで、透明な範囲から徐々に現れて通常の濃度の文字になるように表示させる方法を考えてみましょう。

■ 不透明度の数値を変化させる定義

ここでは「alpha」フィルタの「opacity」(不透明度)の数値を一定間隔で変更させるようにJAVA Scriptで定義します。

<SCRIPT LANGUAGE="JavaScript">
<!--
function fadein(){
document.all.word.filters.alpha.opacity += 1;
fa=document.all.word.filters.alpha.opacity;
if(fa <= 100){
setInterval('fadein()',100)
}
}
//-->
</SCRIPT>

■ 文字の不透明度を上げるタイミングの設定

上で設定した関数(不透明度を上げる)をいつ実行するかを設定します。

<BODY onLoad="setInterval('fadein()',100)">

上例では、ホームページを読み込んだタイミングで実行するように設定しています。

■ 不透明度を上げる文字列と「alpha」フィルタの設定

文字列と「alpha」フィルタの属性を設定をします。

<DIV ID="word" STYLE="position:absolute; left:137px; top:194px; font-size:40pt; font-weight:bold; filter:alpha(opacity=0); background-image: url(../../assets/images/BAN_176.GIF); background-repeat: no-repeat; layer-background-image: url(../../assets/images/BAN_176.GIF); border: 1px none #000000; width: 502px; height: 125px;"> 
<p align="center">apha script sample<BR>
</p>
</DIV>
「alpha」フィルタでは、不透明度は「opacity」に0〜100の数値を指定することで調整できます。数値が0の場合は透明になり、100に近づくにつれて不透明度が上がり、100で通常の色が表示されます。例では、JAVA Scriptによって「opacity」の値が100以下ならば、100になるまで1づつ数値を上げ徐々に文字を表示するように設定しています。このとき、最初に文字列を透明にしておくには、「不透明度を上げる文字列とalphsフィルタの設定」で「opacity」の値を0に指定しておきます。

<<<戻る

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box